Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/harshh-sahu/scm2.0

A web-based application built with Spring Boot for managing personal contacts. Users can securely store, edit, and access their contacts, upload profile pictures, and manage multiple accounts. Backend powered by MySQL, with a responsive frontend using HTML, CSS, and JavaScript.
https://github.com/harshh-sahu/scm2.0

css3 hibernate html java javascript mysql scm20 spring spring-boot spring-data-jpa spring-mvc springsecurity

Last synced: about 1 month ago
JSON representation

A web-based application built with Spring Boot for managing personal contacts. Users can securely store, edit, and access their contacts, upload profile pictures, and manage multiple accounts. Backend powered by MySQL, with a responsive frontend using HTML, CSS, and JavaScript.

Awesome Lists containing this project

README 

        
# Spring Boot Application with Tailwind CSS Frontend



Here is a description for the Smart Contact Manager project:



Smart Contact Manager

Smart Contact Manager is a web-based application built using Spring Boot for the backend and HTML, CSS, JavaScript for the frontend. It allows users to securely store, manage, and access their personal contacts in a centralized platform. Each user can create an account and maintain their own set of contacts with a user-friendly interface. The application is designed to handle multiple users, ensuring that each user’s contact information is private and accessible only to them.



Key Features:

User Authentication: Users can register, log in, and securely manage their accounts.

Contact Management: Add, edit, delete, and view contacts. Each contact includes fields such as name, email, phone number, and additional notes.

Image Upload: Users can upload profile pictures for each contact, with image files stored uniquely using a UUID filename for better organization and security.

Responsive Design: A clean and intuitive interface optimized for different screen sizes, enhancing the user experience.

Database Integration: Contacts are stored in a MySQL database with proper data integrity and security.

The project serves as a complete personal contact management solution, leveraging Spring Boot for backend processing and Thymeleaf for dynamic HTML rendering.



This is a Spring Boot application with a frontend designed using Tailwind CSS. The application handles backend operations and frontend styling with Tailwind CSS, which is processed using the command `npx tailwindcss`.



## Prerequisites



Before running this application, make sure you have the following installed:



- Java 17 or later

- Maven 3.8+

- Node.js (for frontend and Tailwind CSS)

- MySQL (or any database configured in the `application.properties` file)



## Setup Instructions



### 1. Clone the Repository



git clone https://github.com/harshh-sahu/scm20.git

cd your-repository

2. Configure the Database

Ensure the application.properties file contains the correct configuration for your MySQL (or other) database:



properties



spring.datasource.url=jdbc:mysql://localhost:3306/your-database?serverTimezone=UTC

spring.datasource.username=your-username

spring.datasource.password=your-password

spring.jpa.hibernate.ddl-auto=update

3. Install Backend Dependencies

Run the following command to install all the required backend dependencies:



mvn clean install

4. Run the Spring Boot Application

You can start the Spring Boot application by running:



mvn spring-boot:run

This will start the backend server on http://localhost:8080.



5. Install Frontend Dependencies

Navigate to the frontend directory and install the required npm packages:



npm install

6. Start Tailwind CSS in Watch Mode

Run the following command to process Tailwind CSS and watch for any changes:



    npx tailwindcss -i .\src\main\resources\static\css\input.css -o src/main/resources/static/css/output.css --watch

    

    

This will generate the output.css file from the input.css file and keep updating it with any changes.



7. Access the Application

Once both the backend and frontend are running, you can access the application at http://localhost:8080.



Project Structure

src/main/java: Backend code (Spring Boot controllers, services, repositories)



src/main/resources/static: Frontend code (HTML, CSS, JS)



src/main/resources/templates: Thymeleaf templates for the web pages



src/main/resources/application.properties: Configuration file for database and other settings



License

This project is licensed under the MIT License - see the LICENSE.md file for details.