How I Built a Full-Stack Diary App with MERN Stack
Kajal VermaAs part of my journey to becoming a full-stack developer, I decided to build a diary web app using the MERN stack (MongoDB, Express, React, and Node.js). This app is designed to provide users with a seamless online experience where they can browse, buy, and view various dairy products.
The project helped me deepen my understanding of full-stack development by integrating frontend and backend technologies, implementing user authentication with JWT for secure login, and managing data with MongoDB. Along the way, I focused on building a clean, responsive UI using React and Tailwind CSS, and created RESTful APIs to handle product listings, user orders, and payments.
This diary app is not only a practical e-commerce platform but also a great example of how modern web technologies come together to solve real-world problems. In this blog post, I’ll share my development process, challenges I faced, and the key features I implemented.
List the features I implemented, like:
User authentication (Login/Signup)
Create, edit, delete diary entries
JWT token-based protected routes
Responsive UI with Tailwind CSS
cashfreepayments integration
⚙️Technologies Used
Break down the MERN Stack + any extra tools:
MongoDB: Database for storing user data and notes.
Express.js: Backend API for CRUD operations.
React.js: Frontend UI.
Node.js: Server runtime.
JWT: For user authentication.
Tailwind CSS: For styling.
🛠️Project Architecture
React → Axios → Express → MongoDB
- Protected Routes using JWT
🔐Authentication Flow
User registers → JWT token is returned → Stored in localStorage → Used for protected routes.
🎨UI & UX Details
- colour scheme green,red,yellow
🚀Deployment
Backend on Render
Frontend on Render
🤯Challenges Faced
CORS issues
JWT verification
Connecting frontend with backend
Deployment problems
📚What I Learned
Working with full-stack architecture
API handling and state management
Importance of error handlin
🔗Link
Subscribe to my newsletter
Read articles from Kajal Verma directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by