The Better-Habits project aims to provide users with a platform to develop better habits and track their progress. It utilizes a client-server architecture, with the client-side built using React and the server-side implemented using Express.js and MongoDB.
The application allows users to create new habits, set levels, define alternatives, and receive feedback and scores based on their progress. The dashboard provides an overview of the user's habits and scores, allowing them to track their performance over time.
With Better Habits, users can:
- Sign up for a new account or log in to an existing account.
- Navigate to the dashboard to view your habits and scores.
- Create new habits and track your progress.
- Interact with the habits to update scores and receive feedback.
- Explore other features of the application, such as the about page and navigation menu.
Installation
Scripts
Tech Stack
File Structure
To run the Better-Habits application locally, follow these steps:
- Clone the repository:
git clone https://github.com/your-username/better-habits.git
- Navigate to the project directory:
cd better-habits
- Install the dependencies:
npm install
- Start the client and server concurrently:
npm run dev
- Open your web browser and visit
http://localhost:3000
to view the application.
In the project directory, you can run the following scripts:
npm start
: Starts the server with nodemonnpm run build
: Builds the client-side application for production deployment.npm run dev
: Runs the server with nodemon and client concurrently
The file structure of the Better-Habits project is organized as follows:
.
├── LICENSE
├── README.md
├── client
│ ├── App.jsx
│ ├── components
│ │ ├── About.jsx
│ │ ├── DashboardContainer.jsx
│ │ ├── HabitPost.jsx
│ │ ├── Home.jsx
│ │ ├── Login.jsx
│ │ ├── Navbar.jsx
│ │ ├── Sidebar.jsx
│ │ └── Signup.jsx
│ ├── index.html
│ ├── index.js
│ └── stylesheets
│ ├── _about.scss
│ ├── _dashboardContainer.scss
│ ├── _habitpost.scss
│ ├── _home.scss
│ ├── _login.scss
│ ├── _navbar.scss
│ ├── _sidebar.scss
│ ├── _signup.scss
│ ├── _styles.scss
│ ├── _variables.scss
│ └── application.scss
├── package-lock.json
├── package.json
├── server
│ ├── controllers
│ │ ├── habitController.js
│ │ └── userController.js
│ ├── models
│ │ └── Models.js
│ ├── routes
│ │ ├── habitRouter.js
│ │ └── userRouter.js
│ └── server.js
├── todo.md
└── webpack.config.js
The client
directory contains the client-side code, including the React components and the main entry point (index.js
).
The server
directory contains the server-side code, including the server configuration (server.js
), routes (userRouter.js
and habitRouter.js
), models (Models.js
), and controllers (habitController.js
and userController.js
).