andemosa/task-app

A task manager application allowing users to add, edit, delete and view all tasks to be carried out per day. The application was built using Typescript, React, Express and MongoDB

Task Manager Application

This is a sample full stack application built using React and Nodejs. The application allows users to create tasks for a particular day, edit, update the task and task status and also delete tasks.

The project also includes a Swagger documentation.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Setting Up
• Documentation
• Author

Overview

The challenge

The task is to seamlessly integrate the provided figma design, into a fully functional web application, demonstrating expertise in full stack web development and pixel-perfect implementation.

This Todo list should be web and mobile responsive

• Users should be able to add a todo
• Users should be able to edit a todo
• Users should be able to delete a todo
• Users should be able to see all todos
• All todos should be paginated

Screenshot

Links

• Live Site URL: (https://task-app-andemosa.vercel.app/)

My process

Built with

• TypeScript
• React.js
• Tailwind
• ShadcnUI
• Redux Toolkit
• Express
• Zod

Setup

This guide will walk you through the process of setting up the Task Manager App on your local machine.

Prerequisites

Before you begin, ensure you have Node.js installed on your system.

Cloning the Repository

Start by cloning the repository to your local machine:

git clone https://github.com/andemosa/task-app.git
cd task-app

Backend Configuration

1. Environment Files: Navigate to the server folder and create an .env file using the .env.example file.

2. MongoDB Setup:

   • Sign up for an account at MongoDB Atlas.
   • Create a new cluster and follow the instructions to set up a new database.
   • Once set up, obtain your MongoDB connection string and add it to the MONGODB_CONNECTION_STRING variable in your .env files.
   • For the .env.e2e setup see "running automated tests" below

3. JWT_SECRET_KEY:

   • This just needs to be any long, random string. You can google "secret key generator".

Frontend Configuration

1. Environment Files: Navigate to the frontend folder and create an .env file using the .env.example file.

2. Cloudinary Setup:

   • Create an account at Cloudinary.
   • Navigate to your settings and create a new preset.
   • Replace the placeholder :cloud_name with your username and :action with upload for the VITE_UPLOAD_LINK
   • Add your preset name as VITE_UPLOAD_PRESET.

3. VITE_BASE_URLL:

   • The VITE_BASE_URL should point to the URL where your backend application is running (typically http://localhost:4000 if you're running it locally).

Running the Application

1. Backend:

   • Navigate to the server directory.
   • Install dependencies: yarn install.
   • Start the server: yarn dev.

2. Frontend:

   • Open a new terminal and navigate to the frontend directory.
   • Install dependencies: yarn install.
   • Start the frontend application: yarn dev.
   • The application should now be running on http://localhost:5173 but verify this in your command line terminal

API Documentation

The REST API exposes its OpenAPI. You can view the API definition interactively using the Swagger UI, hosted at /docs. Simply start the server and navigate to http://127.0.0.1:4000/docs in your browser to access the Swagger UI.

Alternatively, you can explore the online version of the API documentation without running the server.

Author

• Anderson Osayerie - @andemosa
• Twitter - @andemosa