TaskHero

This is a Next.js project bootstrapped with create-next-app.

Getting Started

Note this Project was developed on a MacOSX system so the install steps may vary depending on your system. To get the most accurate steps I would recommend you use a MacOSX or UNIX system and utilize the NPM package manager

Requirements

1. Node.js installed on your machine
2. A package manager (npm, yarn, pnpm)
3. MongoDB account
4. Mailtrap account

Installation

Clone the repository

init the project with your package manager of choice, for example:

npm init
# or
yarn init
# or 
pnpm init

Dependencies should install on their own when you init the project but just incase here are the main dependencies you need to install:

npm install axios bcryptjs nodemailer jsonwebtoken react-hot-toast mongoose
# or 
yarn add axios bcryptjs nodemailer jsonwebtoken react-hot-toast mongoose
#or 
pnpm add axios bcryptjs nodemailer jsonwebtoken react-hot-toast mongoose

---

After you need to create a MongoDB account & database

1. create a cluster using the free tier and name it whatever you want
2. Select the closest server to you (if ur in cali then choose oregon)
3. you can leave the tags blank, click create cluster
4. dont create the user just yet, just click the cluster you just made on the LHS navigation bar

setting up Security options for MongoDB

1. on the LHS navigation bar click on Network Access (under security)
2. click on add IP address
3. (at the moment) Task hero isnt production ready or is hosted on a server with a static IP, simply use the IP: 0.0.0.0/0 to allow all IP addresses to access for now
4. click confirm

Setting Up user Access:

1. on the LHS navigation bar click on Database Access (under security)
2. click add new database user
3. create a username and password, try to strictly use numbers and letters to avoid any URL encoding issues
4. scroll to 'Built in role' and select Read and Write to Database
5. click add user

Connecting MongoDB to TaskHero

1. click on the cluster you created
2. click on connect
3. Click the compass icon Option
4. Copy the URL provided by MongoDb, note the password field in the URL isnt provided, you need to enter that yourself (i.e. replace the '' with the one you made in earlier steps)
5. paste mongoDB url into the .ENV file specified below

---

Setting up Mailtrap

1. create a mailtrap account
2. create a new inbox
3. click on the inbox you just created and it should show the Integration options
4. Click SMTP, then in code samples choose Node.js
5. in the credentials copy the username & password into the .ENV file specified below

---

Following you need to create a .env file in the projects root directory with the following contents

MONGO_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret #can be anything you want
#for local hosting
DOMAIN=http://localhost:3000 #default port
MTRAP_USER=your_mailtrap_user
MTRAP_PASS=your_mailtrap_pass

First, run the development server:

npm run dev
# or
yarn run dev
# or
pnpm run dev
# or
bun run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!