Frontend-React-NodeJS - Global iTech Solutions

TO DO App (React NodeJS) Project Structure

Here’s a detailed project structure and step-by-step guide for creating a responsive TO-DO-LIST app with ReactJS, Node.js, Jest, and Docker, and deploying it on AWS using an S3 bucket and your domain gitsics.com.

Project Structure

todo-list-app/
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   │   └── todoController.js
│   │   ├── models/
│   │   │   └── todoModel.js
│   │   ├── routes/
│   │   │   └── todoRoutes.js
│   │   └── server.js
│   ├── package.json
│   ├── Dockerfile
├── frontend/
│   ├── public/
│   │   ├── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── TodoList.js
│   │   │   ├── TodoItem.js
│   │   │   ├── AddTodo.js
│   │   └── App.js
│   │   └── index.js
│   ├── package.json
│   ├── Dockerfile
├── tests/
│   ├── frontend/
│   │   └── TodoList.test.js
│   ├── backend/
│   │   └── todoController.test.js
├── .github/
│   ├── workflows/
│   │   └── ci.yml
│   ├── CODEOWNERS
│   ├── PULL_REQUEST_TEMPLATE.md
├── docker-compose.yml
├── .gitignore
├── README.md

2. Setting Up the Project

2.1 Backend Setup

File: backend/src/server.js

const express = require('express');
const todoRoutes = require('./routes/todoRoutes');
const app = express();

app.use(express.json());
app.use('/api/todos', todoRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

File: backend/src/routes/todoRoutes.js

const express = require('express');
const { getTodos, addTodo, deleteTodo } = require('../controllers/todoController');
const router = express.Router();

router.get('/', getTodos);
router.post('/', addTodo);
router.delete('/:id', deleteTodo);

module.exports = router;

File: backend/src/controllers/todoController.js

let todos = []; // Temporary in-memory store

const getTodos = (req, res) => res.json(todos);

const addTodo = (req, res) => {
    const { title } = req.body;
    const newTodo = { id: Date.now(), title };
    todos.push(newTodo);
    res.status(201).json(newTodo);
};

const deleteTodo = (req, res) => {
    todos = todos.filter(todo => todo.id !== parseInt(req.params.id));
    res.status(200).send('Deleted successfully');
};

module.exports = { getTodos, addTodo, deleteTodo };

File: backend/package.json

{
  "name": "todo-backend",
  "version": "1.0.0",
  "scripts": {
    "start": "node src/server.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "jest": "^29.0.0"
  }
}

2.2 Frontend Setup

File: frontend/src/App.js

import React, { useState, useEffect } from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';

function App() {
    const [todos, setTodos] = useState([]);

    useEffect(() => {
        fetch('/api/todos')
            .then(res => res.json())
            .then(data => setTodos(data));
    }, []);

    const addTodo = (title) => {
        fetch('/api/todos', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title }),
        })
            .then(res => res.json())
            .then(newTodo => setTodos([...todos, newTodo]));
    };

    return (
        <div>
            <h1>Todo List</h1>
            <AddTodo addTodo={addTodo} />
            <TodoList todos={todos} />
        </div>
    );
}

export default App;

3. Dockerize the Application

3.1 Backend Dockerfile

FROM node:16-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]

3.2 Frontend Dockerfile

FROM node:16-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

3.3 Docker Compose

version: '3'
services:
  backend:
    build: ./backend
    ports:
      - "5000:5000"
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"

4. Deploying to AWS

4.1 Build React for Deployment

cd frontend
npm run build

4.2 Upload Build to S3

Create an S3 bucket named gitsics.com.
Enable static website hosting in the bucket settings.
Upload the frontend/build folder contents to S3.

4.3 Set Up AWS CloudFront

Create a CloudFront distribution pointing to the S3 bucket.
Configure the domain gitsics.com in Route 53 to point to the CloudFront distribution.

5. CI/CD with GitHub Actions

File: .github/workflows/ci.yml

name: CI/CD Pipeline

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install Dependencies
        run: |
          cd frontend && npm install
          cd ../backend && npm install

      - name: Run Tests
        run: |
          cd frontend && npm test
          cd ../backend && npm test

      - name: Deploy to S3
        run: aws s3 sync ./frontend/build s3://gitsics.com --delete

File Examples

1. `.gitignore`

# Node.js
node_modules/

# Logs
*.log
npm-debug.log*

# Build files
/dist/
/build/

/.env

2. `README.md`

# TODO List App

## Overview
A responsive TO-DO List application built using ReactJS for the frontend, Node.js for the backend, and Docker for containerization. The app supports basic CRUD operations for managing tasks.

## Features
- Add, view, and delete tasks.
- Responsive UI for various screen sizes.
- Backend API for task management.

## Tech Stack
- **Frontend:** ReactJS
- **Backend:** Node.js, Express
- **Testing:** Jest
- **CI/CD:** GitHub Actions
- **Deployment:** AWS S3 with CloudFront

## Setup Instructions
1. Clone the repository:
   ```bash
   git clone https://github.com/your-username/todo-list-app.git
   cd todo-list-app

Install dependencies:

Frontend:
```
cd frontend
npm install
```
Backend:
```
cd ../backend
npm install
```

Run locally using Docker:
```
docker-compose up
```
Build and deploy:
- Frontend: Run npm run build and upload to S3 bucket.
- Backend: Deploy using a Node.js runtime.

Folder Structure

frontend/: ReactJS codebase.
backend/: Express server for API logic.
tests/: Jest test cases for frontend and backend.

License

This project is licensed under the MIT License.

---

#### **3. `CODEOWNERS`**
```plaintext
# Define the code owners for this project
* @your-username @collaborator-username
/backend/* @backend-team
/frontend/* @frontend-team
/tests/* @qa-team

4. `PULL_REQUEST_TEMPLATE.md`

# Pull Request Template

## Description
- Provide a clear and concise description of what this PR accomplishes.

## Related Issue
- Link to the issue this PR addresses (e.g., Fixes #123).

## Changes Made
- List changes made in this PR:
  - Feature 1: ...
  - Feature 2: ...

## Checklist
- [ ] I have performed self-review of my code.
- [ ] I have added tests that prove my fix or feature works.
- [ ] I have added necessary documentation (if applicable).
- [ ] My changes generate no new warnings.

## Screenshots (if applicable)
- Include before/after screenshots for UI changes.

## Reviewers
- Assign reviewers for code review.

These additions provide documentation, collaboration tools, and maintainability features for your project, improving the development workflow and team collaboration.