Codespot

👉 LIVE PREVIEW 👈

Description

Shared blog with ability to create your own user and share your articles with the rest of the users. Users can comment on each others articles and comments. Text editor that allows using several fonts, upload images and even embed code. Enforces user/author permissions through protected routes on the frontend and authorized routes on the backend.

Getting started

git clone [email protected]:Vikms95/blog-api.git
cd blog-api
npm install
npm start

What I've learnt with this project

1. Create a fullstack application with the MERN stack
2. Serve an API following the REST conventions and serve meaningful error responses from the server
3. Managing Authentication and Authorization with JWT
4. Manage all CRUD operations with MongoDB and Mongoose
5. Make endpoint requests with Postman
6. Create a nested comment system between users
7. Modularize React logic by creating my owns custom hooks
8. Implement optimization techniques in the frontend to improve user experience, such as the useMemo hook and the IntersectionObserver API
9. Use the styled-components library to modularize the CSS in JS

Technologies used

1. React / react-router
2. Express
3. MongoDB / Mongoose
4. JWT
5. styled-components
6. TinyMCE

Challenges I faced

1. Sending token to the backend from the frontend component to verify that the token is valid
2. Checking the token on every route to see if the user has access to the protected route
3. Keeping the UI state in sync with the database data
4. Keep the data in state when any page that uses data from the database is reloaded
5. Creating pieces of reusable React logic for all components
6. Allow the user to upload an image with a post
7. Filter sensible data from database models when the models are fetched for use on the frontend
8. Create recursive comment system where comment replies get nested into the parent
9. Make comments get soft deleted when they are deleted by the user and have child comments remaining, otherwise hard delete it from the comment section
10. Send meaningful error messages from the backend so the frontend can act accordingly
11. Make PostPreview and Comment components only load whenever they appear on the screen with the IntersectionObserver API
12. Make the JS from PostPreview and Comment component only load when the IntersectionObserver API is triggered
13. Add pre-load image placeholders with SVG and the react-content-loader library
14. Make the grid system of the Home component allow the first two items to be of different size
15. Deploy my first fullstack app with a backend serving a static website
16. Adapting the endpoint formatting to REST standars
17. Use Bcrypt to hash user passwords to a secure encryption when stored
18. Using composition pattern to create pieces of reusable code as components while also avoiding components that are too cluttered with passed props and conditional rendering depending on those props

Room for improvement

1. Give UI a more professional look
2. Improve loading image times on production
3. Upload images on DB instead of Backend https://www.geeksforgeeks.org/upload-and-retrieve-image-on-mongodb-using-mongoose/#:~:text=So%20for%20storing%20an%20image,in%20the%20form%20of%20arrays.
4. Make styled-components share more properties between components
5. Comment, CommentBody, CommentForm and PostPreview have too many props, refactor them into smaller components and use them as children to those components mentioned
6. Refactor to use less and more reusable code (composition, render props, custom hooks)
7. Form can be composed from a root Form component that holds the shared JSX and State

   TODO

   -->