|
| 1 | +# Task Manager |
| 2 | + |
| 3 | +This repository contains a full-stack Task Manager application with a client-side UI (using `React` / `Next.js`) and a server-side API (`Node.js` / `Express`). Both parts work together to enable task management functionality, including adding, editing, and deleting tasks. This guide will walk you through installing, running, and understanding each part of the project. |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +## Table of Contents |
| 8 | + |
| 9 | +- [Project Overview](#project-overview) |
| 10 | + |
| 11 | +- [Installation](#installation) |
| 12 | + |
| 13 | +- [Running the Project](#running-the-project) |
| 14 | + |
| 15 | +- [File Structure](#file-structure) |
| 16 | + |
| 17 | +- [Technologies Used](#technologies-used) |
| 18 | + |
| 19 | +- [Contributing](#contributing) |
| 20 | + |
| 21 | +--- |
| 22 | + |
| 23 | +## Project Overview |
| 24 | + |
| 25 | +This application is split into **TWO** main sections: |
| 26 | + |
| 27 | +- **Client :** The front-end user interface, built with `React` / `Next.js` and styled with `Tailwind CSS`. |
| 28 | + |
| 29 | +- **Server :** The backend API, built with `Node.js` and `Express` providing `RESTful` endpoints for managing tasks. |
| 30 | + |
| 31 | +--- |
| 32 | + |
| 33 | +## Installation |
| 34 | + |
| 35 | +Before you begin, ensure you have the following installed: |
| 36 | + |
| 37 | +- `Node.js` (version `14.x` or higher) |
| 38 | + |
| 39 | +- `npm` (comes with `Node.js`) |
| 40 | + |
| 41 | +**Step 1: Clone the Repo\*** |
| 42 | + |
| 43 | +```bash |
| 44 | +git clone https://github.com/kn1ghtm0nster/task-manager.git |
| 45 | +cd task-manager |
| 46 | +``` |
| 47 | + |
| 48 | +**Step 2: Install Dependencies for Client and Server** |
| 49 | + |
| 50 | +Navigate to the root project directory (AKA `task-manager`), and install dependencies for both the `client` and `server` folders. |
| 51 | + |
| 52 | +**Installing Server Dependencies** |
| 53 | + |
| 54 | +1. Navigate to the `server` folder: |
| 55 | + |
| 56 | + ```bash |
| 57 | + cd server |
| 58 | + ``` |
| 59 | + |
| 60 | +2. Install `server` dependencies: |
| 61 | + |
| 62 | + ```bash |
| 63 | + npm install |
| 64 | + ``` |
| 65 | + |
| 66 | +**Installing Client Dependencies** |
| 67 | + |
| 68 | +1. Return to the `root` project folder: |
| 69 | + |
| 70 | + ```bash |
| 71 | + cd .. |
| 72 | + ``` |
| 73 | + |
| 74 | +2. Navigate to the `client` folder |
| 75 | + |
| 76 | + ```bash |
| 77 | + cd client |
| 78 | + ``` |
| 79 | + |
| 80 | +3. Install `client` dependencies |
| 81 | + |
| 82 | + ```bash |
| 83 | + npm install |
| 84 | + ``` |
| 85 | + |
| 86 | +--- |
| 87 | + |
| 88 | +## Running the Project |
| 89 | + |
| 90 | +This project **REQUIRES** both the client and server to be running. Below are the instructions for each. |
| 91 | + |
| 92 | +**Running the Server** |
| 93 | + |
| 94 | +1. Navigate to the `server` directory (if not already there): |
| 95 | + |
| 96 | + ```bash |
| 97 | + cd server |
| 98 | + ``` |
| 99 | + |
| 100 | +2. Start the server: |
| 101 | + |
| 102 | + ```bash |
| 103 | + npm start |
| 104 | + ``` |
| 105 | + |
| 106 | + **NOTE :** The server will start on a predefined port (e.g. `http://localhost:5000`). |
| 107 | + |
| 108 | +**Running the Client** |
| 109 | + |
| 110 | +1. Open a new terminal and navigate to the `client` directory: |
| 111 | + |
| 112 | + ```bash |
| 113 | + cd client |
| 114 | + ``` |
| 115 | + |
| 116 | +2. Start the client: |
| 117 | + |
| 118 | + ```bash |
| 119 | + npm run dev |
| 120 | + ``` |
| 121 | + |
| 122 | + **NOTE :** The client will start on a different port (e.g. `http://localhost:3000`) |
| 123 | + |
| 124 | +--- |
| 125 | + |
| 126 | +## File Structure |
| 127 | + |
| 128 | +```plaintext |
| 129 | +Task-Manager/ |
| 130 | +├── client/ # Frontend files (React/Next.js) |
| 131 | +│ ├── src/ |
| 132 | +│ ├── public/ |
| 133 | +│ ├── .eslintrc.json |
| 134 | +│ ├── next.config.mjs |
| 135 | +│ ├── package.json |
| 136 | +│ └── README.md (to be removed) |
| 137 | +├── server/ # Backend files (Node.js/Express) |
| 138 | +│ ├── src/ |
| 139 | +│ ├── tests/ |
| 140 | +│ ├── .env |
| 141 | +│ ├── package.json |
| 142 | +│ └── tsconfig.json |
| 143 | +├── .github/ # GitHub Actions configuration |
| 144 | +└── README.md # Main README file (this file) |
| 145 | +``` |
| 146 | + |
| 147 | +--- |
| 148 | + |
| 149 | +## Technologies Used |
| 150 | + |
| 151 | +- **Frontend :** `React`, `Next.js`, `Tailwind CSS` |
| 152 | + |
| 153 | + - [React Website](https://react.dev/) |
| 154 | + |
| 155 | + - [Next.js Docs](https://nextjs.org/docs) |
| 156 | + |
| 157 | + - [Tailwind CSS Docs](https://tailwindcss.com/docs/installation) |
| 158 | + |
| 159 | +- **Backend :** `Node.js`, `Express` |
| 160 | + |
| 161 | + - [Node.js Docs](https://nodejs.org/docs/latest-v20.x/api/index.html) |
| 162 | + |
| 163 | + - [Express.js Docs](https://expressjs.com/) |
| 164 | + |
| 165 | +- **Testing :** `Jest`, `React Testing Library` |
| 166 | + |
| 167 | + - [Jest Docs](https://jestjs.io/docs/getting-started) |
| 168 | + |
| 169 | + - [React Testing Lib Docs](https://testing-library.com/docs/react-testing-library/intro/) |
| 170 | + |
| 171 | +- **Version Control :** `Git`, `GitHub` |
| 172 | + |
| 173 | +## Contributing |
| 174 | + |
| 175 | +If you wish to contribute and update this project, please: |
| 176 | + |
| 177 | +1. Fork this Repo |
| 178 | + |
| 179 | +2. Clone your fork and create a new branch for your feature |
| 180 | + |
| 181 | +3. Make your changes and **test thoroughly** |
| 182 | + |
| 183 | +4. Open a Pull Request for review |
| 184 | + |
| 185 | + - **NOTE :** Please ensure the target branch is `develop` and **NOT** the `main` branch. |
0 commit comments