https://github.com/salihmezraoui/name-pad

A web app built with Node.js and Express that lets users search, filter, and explore a collection of first names based on gender, syllables, prefixes, and suffixes. Users can save their favorite names to a personal notepad and manage them. The app features pagination and uses MongoDB for data storage.
https://github.com/salihmezraoui/name-pad

backend build-tools css-minification esbuild express frontend html-css js-minification less mongodb mongodbcompass no-frameworks nodejs terser vanilla-javascript web-development

Last synced: 19 days ago
JSON representation

A web app built with Node.js and Express that lets users search, filter, and explore a collection of first names based on gender, syllables, prefixes, and suffixes. Users can save their favorite names to a personal notepad and manage them. The app features pagination and uses MongoDB for data storage.

• Host: GitHub
• URL: https://github.com/salihmezraoui/name-pad
• Owner: SalihMezraoui
• License: apache-2.0
• Created: 2024-12-24T19:15:08.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2025-01-13T00:29:15.000Z (20 days ago)
• Last Synced: 2025-01-13T01:26:40.302Z (20 days ago)
• Topics: backend, build-tools, css-minification, esbuild, express, frontend, html-css, js-minification, less, mongodb, mongodbcompass, no-frameworks, nodejs, terser, vanilla-javascript, web-development
• Language: JavaScript
• Homepage:
• Size: 13.8 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# name-pad: A Web Application for Managing Favourite First Names

This project was developed as part of the *Web-Entwicklung* module at Hochschule Trier, where I received a grade of **2.3**.

## Overview

**name-pad** is a web application designed to help users search for, filter, and manage a list of favourite first names. The application provides a clean and user-friendly interface for browsing a comprehensive database of names, which can be filtered by various criteria. Users can save their favourite names to a personal notepad for prioritization or further management.

The application is powered by **Node.js** and **Express** on the server side and uses a modern browser-based client-side application. Persistent data storage is handled by **MongoDB**. Additionally, advanced build tools like **esbuild** and **Less** are used to ensure a streamlined development process.

## Features

### Core Functionalities:

- **Name Search:**

  - View a list of names in ascending lexicographical order.

  - Pagination support to display a limited number of names per page with navigation controls.

  - Display the current page index and total number of pages.

- **Filter Options:**

  - Filter by gender (male/female).

  - Filter by prefix (names starting or not starting with specific letters).

  - Filter by suffix (names ending or not ending with specific letters).

  - Filter by the number of syllables using the **syllabificate** npm module.

- **Notepad Management:**

  - Add names to a personal notepad.

  - Filter names in the notepad by gender.

  - Prioritize or remove names from the notepad.

    

### Technical Features:

- **Database Management:**

  - Persist data using **MongoDB**.

  - Initial database population from a provided CSV file using a custom Node.js script.

- **Responsive and Modular Design:**

  - Modularized and structured project architecture.

  - CSS styling generated from **Less** files and minified with **less-plugin-clean-css**.

  - JavaScript bundling and minification using **esbuild** and **terser**.

- **Build Automation:**

  - Build, clean, lint, and run the project using npm scripts:

    - `npm run initdb`: Populate the database with initial data.

    - `npm run clean`: Remove generated and downloaded files.

    - `npm run lint`: Check for semistandard rule compliance in all JS files.

    - `npm run debug`: Build the project without minification.

    - `npm run build`: Build the project with minified CSS and JS files.

    - `npm run start`: Start the HTTP server on port 8080.

  

## Technologies Used

- **Server-Side:**

  - **Node.js** and **Express** for HTTP server functionality.

  - Database: **MongoDB** for resource persistence.

- **Client-Side:**

  - Vanilla JavaScript, CSS (generated from Less).

  - No preprocessors or frameworks used.

- **Build Tools:**

  - **Less** for CSS generation.

  - **esbuild** for JavaScript bundling.

  - **terser** for JavaScript minification.

  - **less-plugin-clean-css** for CSS minification.

## Demo

For a demonstration of the application, please refer to the **Screenshots** folder in this repository. It contains images that highlight the key features and user interface of the application.

## Acknowledgments

Special thanks to **Christian Bettinger, M. Sc.**, for his guidance on the system architecture and support throughout the project.