A full-stack Notes application with a React web client, Node.js/Express backend, MongoDB database, and a React Native Android mobile app.
The application allows users to create, view, edit, delete, and search notes. The web application and backend are deployed, while the Android application can be installed directly using the APK.
- Web App:
https://notes-web-app-nine.vercel.app/ - Backend API:
https://notes-web-app-dkev.onrender.com
The project also includes a React Native Android application located inside the app/ directory.
The mobile application uses the same REST API and MongoDB backend as the web application.
- React Native
- TypeScript
- Axios
- REST API
- Android
The latest Android APK is available from the project's GitHub Releases.
After downloading the APK:
- Download the
.apkfile on your Android phone. - Open the downloaded APK.
- If Android asks for permission to install apps from that source, allow it.
- Install the application.
- Open Notes App and start using it.
The APK connects to the deployed backend API, so the application can communicate with the server even when your phone is not connected to your development computer.
- Create new notes
- View all notes
- Edit existing notes
- Delete notes
- Search notes instantly
- REST API integration
- MongoDB database integration
- Responsive UI
- React + Vite
- Tailwind CSS
- Axios
- Loading/skeleton state
- Search and sorting
- React Native
- TypeScript
- Native Android application
- API integration with the existing backend
- Mobile-friendly UI
- React
- Vite
- Tailwind CSS
- Axios
- React Native
- TypeScript
- Axios
- Node.js
- Express.js
- MongoDB
- Mongoose
- Vercel — Web frontend
- Render — Backend API
- GitHub Releases — Android APK distribution
notes-app/
│
├── client/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── services/
│ │ ├── hooks/
│ │ ├── context/
│ │ ├── App.jsx
│ │ └── main.jsx
│ │
│ └── package.json
│
├── server/
│ ├── config/
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ ├── middleware/
│ ├── app.js
│ ├── server.js
│ └── package.json
│
├── app/
│ ├── android/
│ ├── ios/
│ ├── src/
│ │ ├── components/
│ │ ├── screens/
│ │ ├── services/
│ │ └── types/
│ ├── App.tsx
│ ├── package.json
│ └── tsconfig.json
│
└── README.md
git clone https://github.com/jdcodebase/notes-web-app.gitMove into the project directory:
cd notes-appNavigate to the server folder:
cd serverInstall dependencies:
npm installCreate a .env file:
PORT=8000
MONGODB_URI=your_mongodb_connection_string
CLIENT_URL=http://localhost:5173Start the backend server:
npm run devThe API will run locally on:
http://localhost:8000
Open a new terminal and navigate to the client folder:
cd clientInstall dependencies:
npm installCreate a .env file:
VITE_API_URL=http://localhost:8000/apiStart the frontend:
npm run devThe web application will normally be available at:
http://localhost:5173
Navigate to the mobile application:
cd appInstall dependencies:
npm installStart Metro:
npm startOpen another terminal and run:
npm run androidThe React Native project is intentionally kept in TypeScript because the project was created with App.tsx and tsconfig.json.
From the app directory, build the Android release APK using the React Native Android Gradle project.
The generated APK will be located under:
app/android/app/build/outputs/apk/release/
The exact APK filename may vary depending on the Android/Gradle configuration.
Before creating the APK for other people to install, make sure the mobile application is configured to use the deployed backend API:
https://notes-web-app-dkev.onrender.com
Do not use:
http://localhost:8000
for the distributed APK.
localhost on a user's phone refers to the phone itself, not your development computer.
The APK should preferably not be committed directly into the Git repository.
Instead:
- Build the release APK.
- Go to the GitHub repository.
- Create a new Release.
- Give it a version such as
v1.0.0. - Upload the
.apkfile as a Release asset. - Publish the Release.
- The README download button can then point to:
../../releases/latest
This keeps large binary files out of the normal Git history while still giving users an easy way to download the application.
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/notes |
Get all notes |
| POST | /api/notes |
Create a note |
| PUT | /api/notes/:id |
Update a note |
| DELETE | /api/notes/:id |
Delete a note |
The backend CRUD API has been tested successfully with Postman, including create, read, update, delete, validation, and 404 handling.
- User authentication (JWT)
- Pin notes
- Categories/Tags
- Dark mode
- Archive notes
- Toast notifications
- Pagination
- Rich text editor
- Push notifications
- Offline support
- App icon and splash screen improvements
- Google Play Store deployment
During this project, I gained practical experience with:
- Building REST APIs using Express.js
- MongoDB CRUD operations with Mongoose
- Connecting React to a backend using Axios
- React state management with Hooks
- React Native development
- TypeScript in React Native
- Connecting a mobile application to a REST API
- Environment variables
- CORS configuration
- Loading and error states
- Responsive web UI
- Android application development
- Building and distributing an Android APK
- Deploying frontend and backend applications
- Debugging development and production issues
- Git and GitHub workflow
Jatin Dhamija
GitHub: https://github.com/jdcodebase
LinkedIn: https://www.linkedin.com/in/jatindhamija/
If you found this project helpful, consider giving it a ⭐ Star on GitHub.