Skip to content

blueleorio/FullStackFinalProject

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo

App Name

NPM Version

MongoDB Express.js React Node.js


⚡️ 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)

Netlify

Log In Page

Log In Page

Dash Board Page

Dash Board

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:https://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

ERD

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: