Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions App-Description.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# 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](https://github.com/PiyushB752/express-react-fullstack_Zolvit_Day-19). 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 |
Loading