Track Tracking

About The Project • Project Structure • Getting Started • Usage • Contact

About The Project

The Task Tracking App is a dynamic web application built on the MERN (MongoDB, Express.js, React, Node.js) stack, following the Model–View–Controller (MVC) architectural pattern. This comprehensive task management tool combines a user-friendly interface with powerful backend technologies to streamline task organization and productivity. Leveraging REST APIs, the app enables users to seamlessly Create, Read, Update, and Delete (CRUD) tasks, providing complete control over their task lists.

One of the project's core features is its integration of JSON Web Tokens (JWT) for robust user authentication. With JWT, users can securely access their tasks and data while enjoying a personalized experience. This app empowers users to categorize tasks based on their status, set due dates, and prioritize them, facilitating efficient task management. It is a versatile tool suitable for individuals and teams seeking to enhance their productivity and stay organized.

Hosting

The frontend of the application is hosted on Netlify, while the backend is deployed on Render. You can access the live website at this link: Trask Tracking App

Please note that the backend, hosted on Render's free tier for demonstration purposes, may take a minute or two to start up. As a result, you may experience a slight delay, such as when creating a new task or signing up, as the website makes initial API calls to the backend. However, once the backend is up and running, the website will function as intended.

Key Technologies Used

• MongoDB: A NoSQL database for storing task data.
• Express.js: A Node.js framework for building the backend API.
• React: A JavaScript library for creating user interfaces.
• Node.js: A JavaScript runtime environment for server-side development.
• Material-UI (MUI): A React UI framework for designing user interfaces.
• REST API: Employed for creating, reading, updating, and deleting tasks (CRUD operations).
• JWT (JSON Web Tokens): Used for user authentication.
• Cookies: Utilized for managing user sessions and authentication state.
• Mocha: A JavaScript test framework for backend testing.
• Chai: An assertion library for Node.js.
• Chai-HTTP: An HTTP assertion library for testing HTTP requests and responses.
• Jest: A JavaScript testing framework for frontend testing.
• Axios: A library for making HTTP requests in both frontend and backend.
• Sinon: A library for creating spies, mocks, and stubs in JavaScript tests.

(back to top)

Project Structure

Front-End

The front-end of the application is organized into the following directories:

• client Folder:
  • src Folder:
    • components: Contains React components for various UI elements.
    • context/providers: Provides context and state management for tasks and user authentication.
    • pages: Defines the main application pages.
    • styles: Holds the stylesheets for the application.

Components

File	Description
Header.js:	The header component of the application.
ForgotPassword.js:	Handles user password recovery.
Login.js:	Responsible for user authentication.
Modal.js:	Manages modal content display.
Profile.js:	Allows users to manage their profiles.
RegistrationSuccess.js:	Displays a success message after user registration.
SignUp.js:	Handles user registration.
TaskAdd.js:	Allows users to add new tasks.
TaskBoard.js:	The main task management board.
TaskCard.js:	Displays individual task cards.
TaskColumn.js:	Manages columns of tasks.
TaskEdit.js:	Handles task editing.
AuthContext.js:	Manages authentication state.
TaskContext.js:	Manages task-related state.

Back-End

The back-end of the application is organized into the following directories:

• server Folder:
  • src Folder:
    • controller: Contains controller functions for handling routes.
    • middleware: Defines authentication middleware.
    • database: Manages database connection
    • routes: Defines API routes.
    • utils: Contains utility functions.

Components

File	Description
taskController.js:	Contains controller functions for handling task-related routes.
userController.js:	Contains controller functions for handling user-related routes.
databaseConnection.js:	Establishes a connection to the MongoDB database using Mongoose.
cleanupTasks.js:	Defines cleanup tasks to remove old anonymous tasks.
authMiddleware.js:	Authentication middleware for verifying JWTs.
task.js:	Defines the Mongoose schema for the Task model.
user.js:	Defines the Mongoose schema for the User model.
taskRoutes.js:	Defines API routes for managing tasks.
userRoute.js:	Defines API routes for managing users.
hashPassword.js:	Utility function for password hashing.
uuid.js:	Utility function to generate UUIDs.
app.js:	Sets up the Express server, connects to MongoDB, and defines routes.
server.js:	Starts the Express server and listens on a specified port.

(back to top)

Getting Started

To set up a project locally, follow these simple steps.

Prerequisites

Software used to run the program.

• Visusal Studio Code

• Node

• Git

Installation

Here's how to install and set up the program.

From your command line:

# Clone this repository
$ git clone https://github.com/AlexisRodriguezCS/Task-Tracking.git

# Go into the repository
$ cd Task-Tracking

# Go into the repository
$ cd client

# Install client dependencies
$ npm install

# Start the client(front end)
$ npm start

# Go back into root repository
$ cd ..

# Go into the repository
$ cd server

# Install server dependencies
$ npm install

# Start the server(back end)
$ npm start

(back to top)

Contact

Alexis Rodriguez - LinkedIn - [email protected]

Project Link: https://github.com/AlexisRodriguezCS/Task-Tracking.git

(back to top)