Frontend Developer Intern Assignment

Project Overview

This project is a full-stack web application developed as part of a Frontend Developer Intern assignment.

The primary focus of this project is frontend development using React. A lightweight backend built with Node.js and Express is included to support authentication and API integration. The project demonstrates clean UI, proper routing, protected pages, and frontend–backend communication.

---

Tech Stack

Frontend

• React.js (Vite)
• React Router DOM
• Axios
• CSS (inline styling)

Backend

• Node.js
• Express.js
• CORS

---

Features Implemented

Authentication

• User Registration
• User Login
• Protected Dashboard Route
• Logout functionality

Dashboard

• Add tasks
• View task list
• Delete tasks
• Frontend-based CRUD operations using React state

Integration

• Frontend and backend connected using REST APIs
• Axios used for API communication
• CORS handled on backend

---

Project Structure

project-folder │ ├── frontend │ ├── src │ │ ├── pages │ │ │ ├── Login.jsx │ │ │ ├── Register.jsx │ │ │ └── Dashboard.jsx │ │ ├── ProtectedRoute.jsx │ │ ├── App.jsx │ │ └── main.jsx │ ├── backend │ ├── server.js │ └── README.md

yaml Copy code

---

How to Run the Project Locally

Backend Setup

cd backend npm install node server.js

nginx Copy code

Backend will run on: http://localhost:5000

yaml Copy code

---

Frontend Setup

cd frontend npm install npm run dev

nginx Copy code

Frontend will run on: http://localhost:5173

yaml Copy code

---

Security & Best Practices

• Protected routes implemented on frontend
• Basic form validation
• Separation of frontend and backend concerns
• Clean and readable code structure

---

Scalability Notes

For production-level implementation, the application can be enhanced by:

• Adding JWT-based authentication
• Connecting a database such as MongoDB or PostgreSQL
• Implementing role-based access control
• Deploying frontend and backend as separate services

---

Author

Frontend Developer Intern