coderschoolmentee/fullstackfinalproject

CoderSchool Full Stack Web - Final Project

---

⚡️ Table of Contents

Click to expand

1. Project Introduction
2. Installation
3. Usage
4. User Stories
5. Schema & ERD
6. API
7. Todo list

⭐️ Introduction

Hello, this is Sheeb. I made it for my final project in the Full Stack Developer course at CoderSchool. I use habit trackers every day and wanted to make one that is fun and helpful

With Sheeb, you can keep track of your habits, stay excited, and enjoy reaching your goals. It's not just a habit tracker, it's a tool to help you get better every day

🏆 Features

• Habit Maker: Create your desired tasks with a variety of scheduling options
• Goal Tracker: Keep track of your habit progress effectively
• Self-hosted, Open-source: Customize to your heart's content

📺 Demo

Status: (Click to proceed to webpage)

Log In Page

Dash Board Page

Go to top ↾

📁 Installation

Prerequisites

Here's what you need to be able to run Sheeb:

• Node.js (version >= 18)
• MongoDB Database

1. Clone the repository

git clone  https://github.com/blueleorio/FullStackFinalProject.git

Tree Directory

🌳🌳🌳

.root                 .root
├── client            ├── server
│ ├── src             │ ├── controllers
│ │ ├── app           │ ├── helpers
│ │ ├── components    │ ├── middlewares
│ │ ├── contexts      │ ├── models
│ │ ├── features      │ ├── routes
│ │ ├── hooks         │ │
│ │ ├── layouts       │ ├── .env
│ │ ├── pages         │ └── app.js
│ │ ├── routes        │
│ │ ├── themes        └── README.md       
│ │ ├── utils
│ │ └── App.js
│ ├── .env
│ └── README.md

2. Install dependencies

Client

Expand for more

cd client
npm install

.env

REACT_APP_BACKEND_API = your back-end port
REACT_APP_GOOGLE_CLIENT_ID = "your_code_id.apps.googleusercontent.com"
REACT_APP_CLOUDINARY_CLOUD_NAME = your cloud name
REACT_APP_CLOUDINARY_UPLOAD_PRESET = your preset

Server

Expand for more

cd server
npm install

.env

PORT = 8000
MONGODB_URI =mongodb://localhost:27017/...
JWT_SECRET_KEY = "your jwt secret key"
GOOGLE_CLIENT_ID = "your_code_id.apps.googleusercontent.com"

3. Initialize the app

Client

npm start

Server

npm run dev

Go to top ↾

🔔 User Stories

Authentication

1. As a user, I want to sign up/ log in using email.
2. As a user, I want to sign up/ log in using Google Authentication Service.

User

1. As a user, I want to custom my profile account with extra information.
2. As a user, I want to add my own profile picture.
3. As a user, I want to have a short introduction about myself.

Habit

1. As a user, I want to create habit with options such as: daily/weekly/yearly options.
2. As a user, I want to edit my habit fields such as: title and description.
3. As a user, I want to delete my habit.
4. As a user, I want to click on the habit to see more information.
5. As a user, I want to add tag(s) when I create new habit.
6. As a user, I want to search Habit.

Goal

1. As a user, I want to create goal with selected habit.
2. As a user, I want to track my goal with start date and end date.
3. As a user, I want to edit my goal fields such as: title and description.
4. As a user, I want to delete my goal.
5. As a user, I want to click on the goal to see more information.
6. As a user, I want to add tag(s) when I create new goal.
7. As a user, I want to see my streak with total progresses, progress done, and done percentage.
8. As a user, I want to search Goal

Tag

1. As a user, I want to create tag and assign tag to habit and goal.
2. As a user, I want to delete tag.
3. As a user, I want to filter habit and goal based on selected Tag.

Progress

1. As a user, I want to click Done to finish my progress on that day.
2. As a user, I want to click any on day in Calendar to see habit for that particular day.

Quality of life

1. As a user, I want to see Famous quote, time, calendar... on homepage dashboard.

---

Go to top ↾

📐 Schema & ERD

Entity Relationship Diagram

Schema

User Model :

const userSchema = new mongoose.Schema(
     {
    name: {
      type: String,
      required: true,
    },
    password: {
      type: String,
      required: true,
      select: false,
    },
    email: {
      type: String,
      required: true,
      unique: true,
    },
    phoneNumber: {
      type: String,
      default: "",
    },
    avatarUrl: {
      type: String,
      default: "",
    },
    aboutMe: {
      type: String,
      default: "",
    },
    address: {
      type: String,
      default: "",
    },
    city: {
      type: String,
      default: "",
    },
    country: {
      type: String,
      default: "",
    },
    habits: [
      {
        type: mongoose.Schema.Types.ObjectId,
        ref: "Habit",
        default: [],
      },
    ],
    goals: [
      {
        type: mongoose.Schema.Types.ObjectId,
        ref: "Goal",
        default: [],
      },
    ],
    providers: {
      type: String,
      enum: ["local", "google"],
      default: "local",
    },
    isDeleted: {
      type: Boolean,
      default: false,
      select: false,
    },
  },
  {
    timestamps: true,
  }
);

Habit Model:

const habitSchema = mongoose.Schema({
     name: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      default: "",
    },
    startDate: {
      type: Date,
      required: true,
    },
    endDate: {
      type: Date,
      required: true,
    },
    reminder: {
      type: [String],
      enum: [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
        "Sunday",
      ],
      default: [],
    },
    counter: {
      type: String,
      enum: ["weekly", "monthly", "yearly"],
      default: "weekly",
    },
    repeat: {
      type: Number,
      default: 1,
    },
    createdBy: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "User",
      required: true,
    },
    tags: {
      type: [{ type: mongoose.Schema.Types.ObjectId, ref: "Tag" }],
      default: [],
    },

    status: {
      type: Boolean,
      default: false,
    },
    deletedAt: Date,
    isDeleted: {
      type: Boolean,
      default: false,
      select: false,
    },
  },

  {
    timestamps: true,
  }
);

Goal Model:

const goalSchema = mongoose.Schema(
  {
   name: {
      type: String,
      required: true,
    },
    description: {
      type: String,
    },
    startDate: {
      type: Date,
      required: true,
    },
    endDate: {
      type: Date,
      required: true,
    },
    counter: {
      type: String,
      enum: ["weekly", "monthly", "yearly"],
      default: "weekly",
    },
    repeat: {
      type: Number,
      default: 1,
    },
    habitId: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "Habit",
      // required: true,
    },
    createdBy: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "User",
      required: true,
    },
    progress: {
      type: [{ type: mongoose.Schema.Types.ObjectId, ref: "Progress" }],
      default: [],
    },
    percentage: {
      type: Number,
      default: 0,
      min: 0,
      max: 100,
    },
    tags: {
      type: [{ type: mongoose.Schema.Types.ObjectId, ref: "Tag" }],
      default: [],
    },
    deletedAt: Date,
    isDeleted: {
      type: Boolean,
      default: false,
      select: false,
    },
  },
  {
    timestamps: true,
  }
);

Tag Model:

const tagSchema = mongoose.Schema(
  {
    name: {
      type: String,
      required: true,
      unique: true,
      trim: true,
      maxlength: 20,
      lowercase: true,
    },

    deletedAt: Date,
  },
  {
    timestamps: true,
  }
);

Progress Model:

const progressSchema = mongoose.Schema(
  {
    date: {
      type: Date,
      required: true,
    },
    isDone: {
      type: Boolean,
      default: false, //! incomplete
    },
    habitId: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "Habit",
    },
    createdBy: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "User",
    },
    deletedAt: Date,
    isDeleted: {
      type: Boolean,
      default: false,
      select: false,
    },
  },
  {
    timestamps: true,
  }
);

Go to top ↾

🔑 BackEnd API

URL: https://fullstackfinalproject.onrender.com/

API Endpoint

🥚 User /users

Current User Information:

/**
 * @route GET /User/me
 * @description Retrieves information about the currently authenticated user.
 * @access Login required
 */

 GET URL/User/me

Update User Information:

/**
 * @route PUT /User/:id
 * @description Update user profile
 * @access Login required
 * @req 
  [
    "email",
    "name",
    "aboutMe",
    "address",
    "city",
    "country",
    "phoneNumber",
    "avatarUrl",
  ]
 */

 PUT URL/User/:id

🥚 Habit /habits

Get Habit List:

/**
 * @route GET /Habits/user/:userId
 * @description get list of Habits
 * @access Login required
 */

 GET URL/Habits/user/:userdId

Search Habit based on name:

/**
 * @route GET /habits/search?name=:name
 * @description get list of goal based on name
 * @access Login required
 */

 GET URL/Habits/search?name=:name

Update Habit:

/**
 * @route PUT /Habits/:habitId
 * @description update a Habit
 * @access Login required
 * @req ["name", "description"]
 */

 PUT URL/Habits/:habitId

Delete Habit:

/**
 * @route DELETE /Habits/:habitId
 * @description delete a Habit
 * @access Login required
 */

 DELETE URL/Habits/:habitId

Get habit by date:

/**
 * @route GET /Habits/date/:date
 * @description get list of Habits for a specific date
 * @access Login required
 */

 GET URL/Habits/date/:date

🥚 Goal /goals

Get Goal list:

/**
 * @route GET /goals/user/:userId
 * @description get list of Goals of user
 * @access Login required
 */

 GET URL/goals/user/:userId

Get Goal based on name:

/**
 * @route GET /goals/search?name=:name
 * @description get list of goal based on name
 * @access Login required
 */

 GET URL/goals/search?name=:name

Delete Goal:

/**
 * @route DELETE /Goals/:goalId
 * @description delete a Goal
 * @access public
 */

 DELETE URL/goals/:goalId

🥚 Progress /progresses

get Progress on date:

/**
 * @route GET /Progresses/:ProgId
 * @description get current Prog for current selected date
 * @access Login required
 */

 GET URL/progresses/:ProgId

🥚 Tag /tags

create Tag:

/**
 * @route POST /tags
 * @description create a tag
 * @access Login required
 * @req { "name"}
 */

 POST URL/tags/

get Tag list:

/**
 * @route GET /tags
 * @description get list of tags
 * @access Login required
 */

 GET URL/tags/

delete Tag:

/**
 * @route DELETE /tags/:tagId
 * @description delete a tag
 * @access Login required
 */

 DELETE URL/tags/:tagId

Go to top ↾

---

🍭 Things To Do

• Make documents clean

  • Check all writings are correct and show what we do now.
  • Take out old or not needed writings.

• Make code better

  • Find parts of the writing in code that can be easier or better.
  • Use easy ways to write code that others can understand.

• Fix logic

  • Look at how the app decides things and make it better or faster.
  • Change parts to make the app work better for users.

• Make the look nicer

  • Make the app look better and easy to use.
  • Keep the design the same all through the app.

• Handle mistakes well

  • Make sure the app can find and tell about mistakes in a way users can understand.

• Keep the app safe

  • Check and make the app more secure.
  • Use good ways to protect information and access.

• Make the app faster

  • Find ways to make the app work faster.
  • Use less power and open pages quickly.

• Test more

  • Do more checks to make sure everything works.
  • Use tests to find problems before users do.

• Update tools

  • Look for new versions of tools and use them.
  • Make sure new tools work well with the app.

Go to top ↾