https://github.com/projectsandprograms/contacts-manager

It is an contact manager to manage our contacts. Created using spring boot on backend and react js on frontend.
https://github.com/projectsandprograms/contacts-manager

contact-manager eclipse mysql react-js-project react-project reactjs spring-boot spring-boot-project spring-tool-suite4 vs-code web-application

Last synced: about 1 month ago
JSON representation

It is an contact manager to manage our contacts. Created using spring boot on backend and react js on frontend.

• Host: GitHub
• URL: https://github.com/projectsandprograms/contacts-manager
• Owner: ProjectsAndPrograms
• Created: 2024-06-13T23:50:09.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-01T03:01:54.000Z (6 months ago)
• Last Synced: 2024-07-05T14:59:31.747Z (6 months ago)
• Topics: contact-manager, eclipse, mysql, react-js-project, react-project, reactjs, spring-boot, spring-boot-project, spring-tool-suite4, vs-code, web-application
• Language: JavaScript
• Homepage:
• Size: 1.06 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# contacts-manager

It is an contact manager to manage our contacts. Created using spring boot on backend and react js on frontend.

 

## Technologies used

   1. Java

   2. Spring boot

   3. MySQL database

   4. React Js

   5. Editors : VS code & Spring tool suite 4

## Screenshots



    


        

        

    

    


        

        

    

      


        

    






## How to use ?

  As mentioned the project has two parts and both run on different server

### Run backend code

    

 Step-1 : Open your project in spring tool suite 4 IDE 


   file->import->maven->existing maven project-> click on next -> locate the folder [ContactApi backend] -> click to finish

   



   NOTE: make sure your internet connection is on because maven download jar's required for project to be build.

 Step-2 : Create an MySQL database with the name 'contact_api'.


  You can change the database related settings - If you want the path of file to change settings is :  ContactApi backend\src\main\resources\application.yml



   You can create your database by using mysql workbench 

```sql

CREATE DATABASE `contact_api`;

```

   


      

 Step-3 : Run your application 


   right click on your project name -> Run As -> Spring boot App

   



   If you don't see any errors that means you are good to go. The backend is started and tomcat is running the port 8080

    



   Note: Make sure to do not turn of your backend otherwise your frontend will not work.

### Run frontend code

 Make sure you have node js installed on your machine 

 Step-1 : Locate the folder 'contactapp frontend' using your terminal or command prompt.


   

   install neccessery libraries 

```sh

npm i react-router-dom

```

```sh

npm i react-toastify

```

After the completion of these two you are ready to run the application : to run this type : 

```sh

npm run dev

```

Visit the url appear on your terminal : In my case this is [http://localhost:5173/contacts]

   


   

## Contributing

Pull requests are welcome. For major changes, please open an issue first

to discuss what you would like to change.

Please make sure to update tests as appropriate.