Skip to content

Latest commit

 

History

History
238 lines (180 loc) · 10.1 KB

README.md

File metadata and controls

238 lines (180 loc) · 10.1 KB

BookMate: MERN Bookstore Project


Project Overview:

BookMate is a MERN-based bookstore application designed for managing a collection of books. It provides full CRUD functionality and features a responsive, interactive interface. Users can browse, add, update, and delete books seamlessly using a modern tech stack.


Mission and Objectives

Goal:
To build a dynamic, full-stack bookstore application using MongoDB, Express.js, React.js, and Node.js.

Objectives:

  1. Set up a full-stack application using the MERN stack.
  2. Implement CRUD operations for books using MongoDB.
  3. Design a responsive frontend with React.js and React Router.
  4. Connect the frontend to the backend through API endpoints.
  5. Deploy the application for real-world usage.

Technology Stack for BookMate

Frontend:

  1. React.js

    • Why?: A JavaScript library for building interactive, component-based user interfaces.
    • Use Case: Developing the single-page application for managing books with reusable components.
  2. React Router

    • Why?: Provides declarative routing for React applications.
    • Use Case: Enabling navigation between pages like "Add Book," "Edit Book," and "View Books."
  3. Tailwind CSS

    • Why?: A utility-first CSS framework for rapidly building modern designs.
    • Use Case: Styling the application to be responsive and visually appealing.
  4. Axios

    • Why?: A promise-based HTTP client for making API requests.
    • Use Case: Communicating with the backend API for CRUD operations.

Backend:

  1. Node.js

    • Why?: A runtime environment for running JavaScript on the server.
    • Use Case: Building the backend server for handling requests and managing APIs.
  2. Express.js

    • Why?: A fast, unopinionated web framework for Node.js.
    • Use Case: Creating RESTful API routes for book management.
  3. Mongoose

    • Why?: An ODM library for MongoDB to simplify interactions with the database.
    • Use Case: Defining schemas and models for managing book data.

Database:

  1. MongoDB
    • Why?: A flexible, scalable NoSQL database.
    • Use Case: Storing data about books, including title, author, price, and description.

Deployment:

  1. Vercel

    • Why?: An optimized platform for deploying frontend applications.
    • Use Case: Hosting the React.js frontend.
  2. Render

    • Why?: A cloud platform for deploying backend applications with Node.js.
    • Use Case: Hosting the Express.js backend and exposing API endpoints.

image image image image image image


Workflow Overview

This section illustrates the complete workflow for users and admins in the BookMate application, covering key functionalities such as book management, browsing, and user interactions.


System Architecture

This section demonstrates the high-level architecture of the BookMate app, showcasing the interaction between the frontend, backend, and database. It highlights how users perform actions like browsing, adding, and managing books, with all requests processed by the backend and stored in the database. image


Project Structure for Feature Implementation

This project is structured to ensure a systematic and incremental development process. Each week builds upon the previous deliverables, enabling a smooth transition from basic functionalities to advanced features.


NOTE: Participants are encouraged to customize the user interface and incorporate additional features into the application. These modifications allow participants to demonstrate creativity, improve usability, and enhance the functionality of the project. Such enhancements align with the project’s objective of fostering innovative thinking while providing a personalized learning experience.


Development Plan

Week 1: Setup

Goal: Set up the MERN stack and prepare the project structure.

Tasks:

  1. Install development tools: Node.js, VSCode, and Git.
  2. Initialize the backend:
    • Create a folder for the project and initialize it with npm init.
    • Install Express.js and set up a basic server.
    • Install Mongoose and connect to a local MongoDB instance.
    • Reading Material: Express.js Basics
    • Video Tutorial: Setting Up Express
  3. Initialize the frontend:
    • Create a React project using Vite.
    • Install Tailwind CSS and set up a basic layout.
    • Reading Material: Vite Guide
    • Video Tutorial: React with Vite

Deliverables:

  • A functional backend server with a test route.
  • A React frontend with Tailwind CSS configured.

Week 2: Backend API Development

Goal: Build API endpoints for managing books.

Tasks:

  1. Set up MongoDB Atlas:
  2. Create a book schema with Mongoose.
  3. Implement CRUD API routes for books.

Deliverables:

  • Functional API endpoints for creating, reading, updating, and deleting books.

Week 3: Frontend Setup

Goal: Build basic UI components and set up routing.

Tasks:

  1. Install React Router and create routes for:
  2. Use Tailwind CSS to create:

Deliverables:

  • Functional UI with routing and navigation.
  • Styled components using Tailwind CSS.

Week 4: CRUD Integration

Goal: Integrate API with the frontend for CRUD functionality.

Tasks:

  1. Use Axios to fetch books from the backend and display them in a list.
  2. Create forms for adding and editing books.
  3. Add delete functionality with a confirmation dialog.

Deliverables:

  • CRUD functionality integrated with the React frontend.
  • Validation for book forms.

Week 5: Polishing the App

Goal: Enhance UI/UX and test the application.

Tasks:

  1. Add responsive design using Tailwind utilities.
  2. Test CRUD operations thoroughly on different devices.

Deliverables:

  • A polished, responsive app with a seamless user experience.

Week 6: Deployment

Goal: Deploy the app for public use.

Tasks:

  1. Deploy the backend on Render.
  2. Deploy the frontend on Vercel.

Deliverables:

  • Fully deployed backend and frontend with public URLs.

The End

Checkout the screenshots for your reference Screenshot (109) Screenshot (110) Screenshot (111) Screenshot (112) Screenshot (106) Screenshot (107) Screenshot (108)


References:

https://github.com/mohammad-taheri1/Book-Store-MERN-Stack.git