Canvas Keeper (Note Taking App) ✨📝🚀

Canvas Keeper is a full-stack note-taking application that leverages modern web technologies. The frontend is built with React, and the backend is powered by Node.js and Express. The project is hosted on Vercel and uses MongoDB Atlas for data storage. 🌍💡🛠

Live Demo 🎯🔗🌟

---

Table of Contents 🌜📌📚

• Features
• Tech Stack
• Installation
• Environment Variables
• Running the Project
• Deployment
• Contributing
• License
• Acknowledgements

---

Features ✍️⚡📱

• Note Taking: Create, edit, and delete notes.
• Real-Time Sync: Seamless integration between frontend and backend for instant updates.
• Responsive Design: Works well on desktop and mobile devices.
• User-Friendly Interface: Clean and intuitive UI for a smooth user experience.

---

Tech Stack 🏧💻🌐

• Frontend: React
• Backend: Node.js and Express
• Database: MongoDB Atlas
• Deployment: Vercel

---

Installation 🛠️📅🔽

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone https://github.com/Krishna200608/Keeper.git

2. Install dependencies for both frontend and backend:

   Navigate to each directory and run:

   cd frontend
   npm install

   Then, for the backend:

   cd ../backend
   npm install

---

Environment Variables 🌍🔑📝

Before running the application, create a .env file in both the frontend and backend directories.

Frontend 🏧🖥️🔗

Create a .env file in the frontend folder with the following content:

VITE_BACKEND_URL='http://your-backend-url'

Replace http://your-backend-url with the actual backend URL when deploying or testing locally.

Backend 📺🛠️📱

Create a .env file in the backend folder with the following content:

MONGO_URI='your_mongodb_uri'
PORT=your_port

Replace your_mongodb_uri with your actual MongoDB connection string and your_port with your desired port (e.g., 4000).

---

Running the Project 🚀️⚙️💡

Frontend 🏧📲💻

After setting up the environment variables, start the React development server:

cd frontend
npm start

Backend 🛠️📺🚀

Start the Express server:

cd backend
npm run server

The frontend will connect to the backend using the URL specified in the VITE_BACKEND_URL variable. 🌐🔗⚡️

---

Deployment 🚀📱🌍

• Frontend: The project is hosted on Vercel.
• Backend: For deploying the backend, consider platforms like Heroku, Render, or deploying as serverless functions on Vercel if supported.

For more details on Vercel deployment, refer to the Vercel Documentation. 📘🔍💻

---

Contributing 🤝🌟🛠️

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes and commit them:

   git commit -m "Add some feature"

4. Push to the branch:

   git push origin feature/your-feature-name

5. Open a Pull Request.

Ensure that your code follows the project style guidelines and that all tests pass before submitting a pull request. 🚦✅📌

---

License 📝🔒📚

Distributed under the IIITA License.

---

Acknowledgements 🙌🎉💡

• React
• Express
• Vercel
• MongoDB Atlas