This is a full-stack web application built using the MERN stack (MongoDB, Express.js, React, and Node.js). The journey of developing this application began as part of the Fullstack Open MOOC exercises, where the primary focus was on building a robust backend. Initially, the application had a basic UI implemented using plain HTML. To enhance the user experience, I developed a more modern and visually appealing frontend using Tailwind CSS.
The application serves as a hands-on project to consolidate my understanding of full-stack development, from building a server capable of handling CRUD operations to designing a dynamic and responsive frontend interface.
The backend is built using Node.js and Express.js. It serves as the backbone of the application, providing RESTful APIs for performing CRUD (Create, Read, Update, Delete) operations on data stored in a MongoDB database. Key features of the backend include:
- Create: Add new resources to the database.
- Read: Fetch data, with support for filtering and querying.
- Update: Modify existing resources based on unique identifiers.
- Delete: Remove data securely from the database.
The frontend of the application is built with React and styled using Tailwind CSS, providing a modern, clean, and responsive user interface. Key features of the frontend include:
- Dynamic Data Fetching: Seamless integration with the backend API for real-time updates.
- Responsive Design: Ensures the application looks great on devices of all sizes.
- User-Centric Design: Interactive and intuitive components designed with usability in mind.
Tailwind CSS enabled rapid development of the UI by providing utility-first styling and consistent design practices.
The application is designed to be deployed on a VPS with Nginx as a reverse proxy and PM2 for process management.
You can access the live web application here: Phone Book App