mynotes is a full-stack note management web application built with Node.js, Express, and EJS. It allows users to securely create, manage, organize, and store notes with authentication, user preferences, and optimized frontend performance.
Designed with clean architecture, modular structure, and production-ready practices, this project demonstrates strong backend fundamentals, modern frontend tooling, and security-conscious implementation.
- Full authentication system (Google OAuth + Firebase Auth)
- Secure user session handling
- Notes CRUD functionality
- User-specific data isolation
- Internationalization support
- Optimized frontend build pipeline
- Environment-based configuration
- Node.js
- Express.js
- EJS (Server-side rendering)
- Firebase Authentication
- Firestore Database
- dotenv (.env environment configuration)
- Vanilla JavaScript (Modular structure)
- SCSS (BEM methodology)
- SweetAlert2
- Responsive design principles
- Gulp (Task automation)
- Webpack (Asset bundling)
- Nodemon (Development auto-reload)
- BrowserSync (Live browser reload)
- Git & GitHub (Version control)
The application follows a structured MVC-like pattern with separation of concerns:
mynotes/
│
├── backend/
│ └── server.js
│
├── frontend/
│ ├── js/
│ ├── scss/
│ └── assets/
│
├── views/ # EJS templates
├── public/ # Compiled static assets
├── .env # Environment variables
├── gulpfile.js
└── webpack.config.js
This structure ensures scalability, maintainability, and clarity for team collaboration.
- Firebase Authentication integration (Google Sign-In)
- Firestore user document creation & synchronization
- Secure environment variable handling using
.env - Protection against duplicate actions (overwrite/duplicate logic handling)
- Client-server separation of concerns
- Defensive programming patterns for safer async operations
The application includes a modular translation system that allows dynamic language support through a centralized i18n implementation.
- Webpack bundling and minification
- SCSS compilation and optimization via Gulp
- Modular frontend JavaScript architecture
- Clean DOM event delegation patterns
- Reduced redundant renders
- Structured async/await flows
git clone https://github.com/Wilfredery/mynotes-fullstack.gitnpm installCreate a .env file in the root directory:
PORT=any_host
FIREBASE_API_KEY=your_key
FIREBASE_AUTH_DOMAIN=your_domain
FIREBASE_PROJECT_ID=your_project_id
npm run devThis will start:
- Nodemon
- Gulp watcher
- Webpack bundler
- BrowserSync (if configured)
- Create, edit, delete, and manage notes
- Google authentication
- Overwrite / duplicate handling logic
- Account & settings management (multi-state handling)
- Custom select components
- Responsive layout
- User-based data separation
- Frontend modular architecture
This project was built to demonstrate:
- Full-stack development proficiency
- Clean code architecture
- Secure authentication handling
- Build pipeline optimization
- Real-world production structure
- Recruiter-ready project presentation
- Tag system for notes
- Advanced search and filtering
- Note categorization
- Dark/light theme toggle
- API documentation
- Unit & integration testing
This project is public and available for educational and portfolio purposes.
Developed by Wilfredery Dilone Full-Stack Developer
If you found this project interesting, feel free to explore the code and reach out.
