Skip to content

README.md

Latest commit

 

History

History
156 lines (114 loc) · 5.58 KB

README.md

File metadata and controls

156 lines (114 loc) · 5.58 KB
Spring Boot React MongoDB

TaskFlow — Full Stack Productivity Application

A modern, fully responsive CRUD application built with Java Spring Boot, React, and MongoDB.

Features • Tech Stack • Screenshots • Getting Started • API Reference

Java 17 Spring Boot React License

📖 Overview

TaskFlow is a robust task management platform demonstrating end-to-end full-stack development best practices. It features a scalable RESTful API built with Java and Spring Boot, connected to a NoSQL MongoDB database. The frontend is a snappy, modern single-page application (SPA) built with React and styled with a custom responsive design system.

This project was developed to showcase practical application of Java Full Stack development concepts, including frontend-backend integration, robust API design, and modern UI/UX principles.

✨ Key Features

  • Complete CRUD Operations: Create, Read, Update, and Delete tasks efficiently.
  • RESTful API: Structured and predictable endpoints adhering to REST principles.
  • Responsive UI: Seamless experience across desktop, tablet, and mobile devices.
  • Real-time State Management: Immediate UI updates upon API success.
  • Error Handling & Load States: Graceful degradation and user feedback during network operations.

🛠️ Tech Stack

Backend

  • Java 17: Core programming language.
  • Spring Boot 3.x: Rapid application development framework.
  • Spring Web: For building RESTful, web-based applications.
  • Spring Data MongoDB: Seamless integration with MongoDB.
  • Maven: Dependency management and build lifecycle.

Frontend

  • React.js: Component-based UI library.
  • Vite: Next-generation, lightning-fast frontend tooling.
  • Axios: Promise-based HTTP client for the browser.
  • Vanilla CSS3: Custom, utility-driven styling (Flexbox/Grid).

Database

  • MongoDB Atlas: Cloud-hosted NoSQL database service.

📸 Screenshots

Read Operations

Read Tasks

Create Operations

Create Task

Update Operations

Update Task

Delete Operations

Delete Task
## 🚀 Getting Started

Follow these steps to run the project locally on your machine.

Prerequisites

Ensure you have the following installed:

1. Clone the Repository

git clone https://github.com/eldhoaby/TaskFlow.git
cd TaskFlow

2. Configure the Backend (Spring Boot)

  1. Open backend/src/main/resources/application.properties.
  2. Update the spring.data.mongodb.uri with your MongoDB connection string.
spring.data.mongodb.uri=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/taskflow?retryWrites=true&w=majority
server.port=8080
  1. Run the backend application:
cd backend
./mvnw spring-boot:run     # On Mac/Linux
# OR
.\mvnw.cmd spring-boot:run # On Windows

The backend server will start on http://localhost:8080.

3. Configure the Frontend (React)

Open a new terminal window and navigate to the frontend directory:

cd frontend
npm install
npm run dev

The React application will start on http://localhost:5173 (or port specified by Vite).

📡 API Reference

The backend exposes a standard REST API.

HTTP Method Endpoint Description Request Body Example
GET /api/tasks Fetch all tasks None
POST /api/tasks Create a new task { "title": "Buy groceries" }
PUT /api/tasks/{id} Update an existing task { "title": "Buy groceries", "completed": true }
DELETE /api/tasks/{id} Delete a task None

🎯 Learning Outcomes

Building this project reinforced several critical full-stack concepts:

  • Architecture: Understanding the clear separation of concerns between a React frontend and a Spring Boot backend.
  • CORS Configuration: Safely enabling cross-origin requests from the React dev server to the Spring API.
  • Asynchronous JavaScript: Handling promises and asynchronous data fetching with Axios and React hooks (useEffect, useState).
  • Database Modeling: Designing document-based data structures in MongoDB.

📄 License

This project is open-source and licensed under the MIT License.

Built with passion by Eldhoaby
Java Full Stack Application