A full-stack contact manager built with Java (Spring Boot), PostgreSQL, and React (Next.js). Secure, searchable, and modern. Access your contacts anywhere.
Video-Showcase.mp4
- JWT-based authentication for secure access
- Search contacts by name or fields
- Batch edit multiple contacts at once
- Pagination for smooth browsing through large contact lists
- Fast CRUD: Add, edit, and remove contacts
- Optimized duplicate detection using hashing
- Modern UI with React & Next.js
- RESTful API design & best practices
You’ll need:
- Java 23+
- Node.js & npm
- PostgreSQL (local or remote)
git clone https://github.com/kagamiAL/contact-manager
cd contact-managerYou must create a .env file in the contact_manager_backend directory and fill out the following variables:
TOKEN_SECRET_KEY={YOUR_SECRET_KEY_HERE}
DB_URL={YOUR_DATABASE_URL_HERE}
DB_USERNAME={YOUR_DATABASE_USERNAME_HERE}
DB_PASSWORD={YOUR_DATABASE_PASSWORD_HERE}
FRONTEND_URL={YOUR_FRONTEND_URL_HERE} -- For CORS
You can optionally create a .env file in the contact-manager-frontend directory if you want to change the API URL (for example, if your backend is not running on localhost):
NEXT_PUBLIC_API_URL=https://localhost:8080
- Make sure you've filled out the environmental variables for the backend.
- This project is compatible with PostgreSQL
# Run backend (from backend directory)
cd contact_manager_backend
./mvnw spring-boot:runcd contact-manager-frontend
npm install
npm run dev- By default, the app runs at http://localhost:3000
/
├── contact_manager_backend/ # Spring Boot backend
├── contact-manager-frontend/ # Next.js React frontend
└── README.md
- Real-world API design and full-stack architecture
- Secure JWT authentication and efficient batch actions
- Fast contact search, pagination, and duplicate detection
- Modular best practices (Spring Boot + React)