https://github.com/ackwolver335/inotebookfd
iNotebook is a fast, responsive, and user-friendly online note-keeping web application. Designed to enhance productivity and organization, it allows users to create, edit, and manage notes effortlessly. Built using Vite for superior performance and React for a dynamic user experience, iNotebook ensures smooth and efficient note management.
https://github.com/ackwolver335/inotebookfd
javascript javascript-framework react-router react-router-dom reactjs vite vitereact webapp webapplication
Last synced: 2 months ago
JSON representation
iNotebook is a fast, responsive, and user-friendly online note-keeping web application. Designed to enhance productivity and organization, it allows users to create, edit, and manage notes effortlessly. Built using Vite for superior performance and React for a dynamic user experience, iNotebook ensures smooth and efficient note management.
- Host: GitHub
- URL: https://github.com/ackwolver335/inotebookfd
- Owner: ackwolver335
- Created: 2025-04-15T03:06:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-22T02:51:43.000Z (about 1 year ago)
- Last Synced: 2025-04-23T03:57:07.973Z (about 1 year ago)
- Topics: javascript, javascript-framework, react-router, react-router-dom, reactjs, vite, vitereact, webapp, webapplication
- Language: JavaScript
- Homepage:
- Size: 1.13 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📑 iNotebook - Online Notes Web App 🖥️ (Front-end)
📌 An online Notes fetching Web App, including the user authentication towards **login**, **signup** & **logout**. Also regarding different CRUD operation to be performed over to the notes that are included or created newly with User-friendly interaction on a simple platform.
## 🧠 Features 📝
📍**User Authentication Support**
✒️ Handles user Login, registration & token-based session storage using **JWT**.
📍**CRUD Notes Functionality**
✒️ Users can create, read, update and delete their personal notes seamlessly.
📍**Responsive UI Design**
✒️ Mobile-friendly interface build using **React.js** & **TailwindCSS**.
📍**Dynamic Notes Rendering**
✒️ Notes update in a real-time without page reloads using **State Management**.
📍**Private Notes View**
✒️ Notes are user-specific & not accessible by Other users.
📍**Client-side Routing**
✒️ Implemented with **React Router** for seamless navigation b/w pages **Home**, **Login**, **SignUp** & **Notes**.
📍**API Integration**
✒️ Connecting securely to backend using **APIs** using **Fetch API** for data operations.
📍**Form Validation & Error Handling**
✒️ Validates input fields & displays errors/success messages for better UX.
## 👜 Tech Stack 🖋️
🔖 **React.js** (Javascript Framework)
🔖 **TailwindCSS** (CSS Framework)
🔖 **Fetch API** (Regarding APIs Integration)
## 📷 Demo View
## 📦 Installation or Usage 👇🏻
▶ Project cloning to Local Device 📝 *(Remember you need to be at a specific folder in which you need this project's folder)*
```bash
git clone https://github.com/ackwolver335/inotebookFD.git
cd inotebookFD
# installing node requirements
npm install
# start using
npm run dev
```
## 💻 Deployment Guidelines
📑 Below we have some platforms regarding **Project's Deployment** 👇🏻
▶️ [Render](https://render.com/)
▶️ [Vercel](https://vercel.com/)
▶️ [Netlify](https://www.netlify.com/)
## 🛠️ Contribution GuidLines 🖋️
📰 If anyone wants to contribute to this Project either through my connections through my [profile](https://www.github.com/ackwolver335) or by requesting with the **Pull Request** you can do the same after being a **Contributor**.
## 🖥️ Acknowledgements 👨💻
#### Technologies 💻 & Libraries Used 👇🏻
- [React.js](https://reactjs.org/) – for building the frontend UI
- [Bootstrap](https://getbootstrap.com/) or [TailwindCSS](https://tailwindcss.com/) – for styling
- [Axios](https://axios-http.com/) – for handling HTTP requests
- [Node.js](https://nodejs.org/) & [Express.js](https://expressjs.com/) – for backend API
- [MongoDB](https://www.mongodb.com/) & [Mongoose](https://mongoosejs.com/) – for database
- [JWT](https://jwt.io/) – for secure authentication
- [bcrypt.js](https://www.npmjs.com/package/bcryptjs) – for password hashing
## 📚 Learning Resources
- Inspired by the MERN Stack tutorials from [Code with Harry](https://www.youtube.com/@CodeWithHarry)
- My Learning Resource available at [GitHub](https://github.com/stars/ackwolver335/lists/learning-resources)
## 🌟 Personal Spectacle
📝 Special thanks to me and peers who provided valuable feedback during development.