to-do-full-stack-app-with-users.md

To Do App

Introduction

The goal is to create To Do App that will have the following functionalities:

• users can sign up, log in and log out,
• users can create, list, edit and delete projects and
• projects will have tasks.

This assessment is divided in two parts:

• building server side (API) using Express and
• building client side using React.

As we said, the app needs to have users (signup, login, logout functionality) and full CRUD on at least one of the models. To summarize the requirements for the API side:

• Models: user, project, task
• Routes: auth, projects, tasks

Now let's proceed to creating the Express app 🚀

Instructions

Iteration #1: The Signup & Login & Logout Features

Our app will have users, and they will use email and password to authenticate themselves.

So your user schema should look somewhat like this:

const userSchema = new Schema({
  email: String,
  password: String
}, {
  timestamps: true
});

Now create all the routes needed to have users successfully signup/login/logout. We suggest using passport.js and its local strategy for this iteration. In case you decide to proceed using some other approach, make sure to understand it well since you will have to present the app for us.

Iteration #2: The CRUD on project model

Great, we have users so let's start adding some more functionality to our app. Our projects will have following schema:

const projectSchema = new Schema({
  title: String,
  description: String,
  tasks: [], // referencing the Task model
  owner: // referencing the User model
});

Our users can:

• create new project only when logged in
• edit and delete the projects only if they created them (if they are the owners)
• see the list of the projects even though they are not logged in

Please proceed to creating all the routes. To test the results you can use Postman or some other tool that's more familiar to you.

Iteration #3: The task model and (optional) CRUD on it

Great, you already have fully functioning CRUD app with users but we will go one more step: let's create tasks for each project.

The task schema can look like this:

const taskSchema = new Schema({
  title: String,
  description: String,
  project: // referencing the Project model
});

Our users can:

• when logged in, create tasks in the projects they created
• when logged in, edit and/or delete the tasks (optional)
• when logged out, see all the projects and all the tasks (even of they don't belong to them)

Great! You just created fully functioning API and now it's the time to proceed to the second part which is creating the views using React.

Iteration #4: The client side using React

Create all the necessary components to manifest the full functionality of the app. We require splitting the app into as many as possible reusable components having the navigation and footer components as well. Make sure you manage the state properly so the user's email is shown in the navbar when logged in and login/signup available only if the user is not logged in/signed up. We suggest using axios to fetch/send the data from/to the API but you can use any way that's more familiar to you.

Submission

Please send us the link to the public GitHub repo(s) with the code for the API and client side.

We wish you nothing but good luck!

Happy coding! ❤️