Contact Manager

Project deployed link -> Contact Manager

📝 About The Project

Conatact Manger is web application that allows users to manage their contact with there privacy.

☁️ Overview

This Project is created as React App , This Contains adding contacts , editing them ,deleting them and searching feature followed with each contact individual detail section. Project also contains Switching between dark and light mode . and you progress is saved in local storage so next time you visit your data will be same as last time you left, this project have 0 refresh rate which done by using routers.

💻 Tech Stack

• Basics - HTML, CSS, and Javascript.
• Client - React, Redux, and React Router .

💾 Project Files Description

• public/index.html - This File contains stylesheets links and root div.
• src/components/App.js - This Js File imports all other js component files and binds them together with help of router. Its Content is in all over routes
• src/components/AddContact.js - This Contains html structure of /addcontact route which takes data in form based and pass it to app.js which stores it to the local storage.
• src/components/App.css - This Contains All styling of each route pages.
• src/components/ContactCart.js - (card*) This Contains Contact list each individual card detail displayed on front page and edit and delete button as well.
• src/components/ContactDetails.js - This contains details of individual contacts when tapped on them.
• src/components/ContactList.js - This Contains Full List of All Contacts. that is being displayed on front page.
• src/components/EditContact.js - This File Contains the editing page Ui where you can edit contact detail from old data.
• src/components/Header.js - This contains Header part which is fixed part for every route.
• src/components/darkmode.js - This contains Dark mode switching feature onclick and also keeps saved mode to local storage.
• src/components/predata.js - This is array of data which is given from before.
• src/index.js - This binds App.js to Html root div.

📼 How you can run it Locally

• Step-1 - go to code section above and download it as zip.
• Step-2 - extract the zip file than open the extracted folder in Vscode.
• Step-3 - press ctrl+j in windows it will opern terminal to this folder.
• Step-4 - now run command npm start which will launch this in localhost:3000. (if it not redirect you than manually search localhost:3000.
• Step-5 - Done now you will be able to see project running on your system.

Project-Images