My Calendar App is a full-stack application designed to help users manage their schedules, expenses, to-dos, and notes all in one place. The app provides a seamless and intuitive user interface for efficient day-to-day management, along with robust backend support for secure data handling and user authentication.
- 🔐 User Authentication: Secure login and registration using JWT (JSON Web Tokens).
- 💰 Expense Tracking: Keep track of daily expenses with detailed categories and descriptions.
- ✅ To-Do Management: Create, update, and manage tasks with due dates.
- 🗒️ Notes Management: Store and organize notes with timestamps.
- 📱 Responsive Design: Works across desktop and mobile devices.
- ⚛️ React.js: JavaScript library for building user interfaces.
- 🛣️ React Router: Declarative routing for React applications.
- 🌐 Axios: Promise-based HTTP client for the browser and Node.js.
- 🎨 CSS Modules: Scoped CSS for modular and reusable styling.
- 🖌️ Material-UI: React components for faster and easier web development.
- 🗂️ Context API: For state management across the application.
- 🟢 Node.js: JavaScript runtime for server-side development.
- 🚀 Express: Web framework for building RESTful APIs.
- 📂 MongoDB: NoSQL database for storing user data, expenses, to-dos, and notes.
- 🔗 Mongoose: ODM (Object Data Modeling) library for MongoDB and Node.js.
- 🔑 JWT (JSON Web Tokens): For secure user authentication.
- 🛡️ Bcrypt.js: For password hashing.
- 💻 Frontend: Deployed on Vercel.
- 🌐 Backend: Deployed on Heroku.
- 💾 Database: Hosted on MongoDB Atlas.
- ⚙️ Node.js (v14 or higher)
- 📦 npm or yarn
- ⚛️ react and vite
- 🟢 Node.js (v14 or higher)
- 📂 MongoDB (Atlas or local)
- 🛠️ Postman or any API client for testing
git clone https://github.com/divyansh-2005/my-calendar-app.git
cd my-calendar-app
-
Navigate to the backend directory:
cd backend
-
Install dependencies:
npm install
-
Create a
.env
file in the root directory of the backend and add the following environment variables:MONGO_URI=your_mongo_db_connection_string JWT_SECRET=your_jwt_secret PORT=5000
-
Start the backend server:
npm run dev
The server will run on
http://localhost:5000
.
-
Navigate to the frontend directory:
cd frontend
-
Install dependencies:
npm install
-
Start the frontend development server:
npm run dev
The frontend will run on
http://localhost:3000
.
my-calendar-app/
├── backend/ # Backend Node.js and Express API
│ ├── models/ # Mongoose models
│ ├── routes/ # Express routes
│ ├── controllers/ # Request handlers
│ ├── middleware/ # Middleware functions
│ ├── config/ # Configuration files
│ └── ...
├── frontend/ # Frontend React application
│ ├── src/
│ │ ├── components/ # Reusable components
│ │ ├── pages/ # Page components
│ │ ├── context/ # Context API for state management
│ │ ├── services/ # Axios services for API calls
│ │ └── ...
│ └── ...
└── README.md # Project README file
Refer to the Backend Documentation for detailed information on available API endpoints.
Use Postman or any other API client to test backend endpoints. Set the headers to include x-auth-token
for authenticated requests.
Ensure that the backend server is running. Use your browser to access the frontend on http://localhost:3000
and interact with the application.
- Push the backend code to your Heroku repository.
- Set the environment variables on Heroku using the
.env
file.
- Deploy the frontend on Vercel by linking your repository.
- Ensure the frontend is configured to communicate with the deployed backend.
This project is licensed under the MIT License.
Contributions are welcome! Please fork the repository and create a pull request with your changes. For more information on how to contribute, please refer to our CONTRIBUTING.md.
For any questions or issues, feel free to contact me or raise an issue in the repository.