Skip to content

Latest commit

 

History

History
64 lines (46 loc) · 2.92 KB

File metadata and controls

64 lines (46 loc) · 2.92 KB

Day 19 - Application Architecture and Endpoint Summary

🔧 Overview

This application demonstrates a full-stack setup using React + Redux on the frontend and Express + MongoDB on the backend. It is structured to showcase multiple features while maintaining clarity for learning purposes. The frontend handles the UI and state management using Redux, while the backend manages API routes, database operations, and server-side logic.

📐 Project Setup

This Project is cloned from Repo. The dependencies are installed using the command "npm install" or "npm i". This project can start using the command "npm run dev".

⚙️ Technology Stack

Layer Technology
Frontend React, Redux, Redux-Saga
Backend Node.js, Express.js
Database MongoDB (via Mongoose)
Dev Tools Babel, dotenv, Webpack, Concurrently

🗂 App Structure

🖥️ Frontend

The frontend of this application is built using React + Redux. Key components include:

UI Components

  1. Dashboard.jsx – Main dashboard interface
  2. Login.jsx and Signup.jsx – Authentication screens
  3. Navigation.jsx – Navigation bar
  4. TaskDetails.jsx and TaskList.jsx – Task-related views

Redux / State Management

  1. mutations.js – Contains Redux action creators
  2. sagas.js – Handles side effects using Redux-Saga
  3. sagas.mock.js – Mock data for sagas

🌐 Backend

The backend of this application is built using Express.js + MongoDB. Key files include:

  1. server.js – Main entry point for the Express server
  2. authenticate.js – Handles user authentication logic
  3. connect-db.js – Establishes connection to MongoDB
  4. initialize-db.js – Seeds the database with initial data
  5. communicate-db.js – Contains functions to query and mutate the database

🏞️ Environment Configuration

Setting Value
MongoDB URI mongodb://localhost:27017/organizer
Frontend Port 8080
Backend Port 7777

📡 API Endpoints

Method Endpoint Description
POST /task/new Adds a new task to the database.
POST /task/update Updates an existing task in the database.
POST /comment/new Adds a new comment to the task.
POST /user/create Creating new users
POST /authenticate User authentication
GET /tasks Getting all task data