namrah-99 / reactsync-contacts

Contact App (React Fundamentals, React Router, React CRUD Axios, React Search)

ReactSync Contacts

Introducing ReactSync Contacts – a dynamic Contact Manager that redefines React proficiency. Unleash the power of functional components, JSX magic, and React hooks. Seamlessly integrates the Context API, JSON Server, and LocalStorage for a smooth user experience. Elevate your skills with clean code and efficient state management.

Features

• Functional Components: Utilizing the power of functional components for building a modular and maintainable application structure.
• JSX: Leveraging JSX for declarative and efficient UI rendering.
• Props: Effectively passing and managing data between React components using props.
• List and Keys: Implementing lists and keys for dynamic rendering of components.
• React Hooks (useState, useEffect, useRef): Embracing the functional capabilities of React through hooks for state management and side effects.
• Components Lifecycle Methods: Understanding and implementing lifecycle methods for enhanced control over component behavior.
• Conditional Rendering: Employing conditional rendering for dynamic display based on application logic.
• Basic Form Handling: Incorporating form handling techniques to capture user input.
• LocalStorage: Utilizing LocalStorage for persisting data on the client side.
• JSON Server: Introducing a REST API effortlessly with the help of the JSON server npm package.
• Context API: Resolving Prop Drilling issues and achieving better state management through the Context API.
• Code Refactoring: Demonstrating code refactoring skills for improved maintainability and readability.

Technologies Used

Client: React, React Router, Axios, Semantic UI, Context API, LocalStorage, JavaScript (ES6+)

Server: JSON Server

Run Locally

Clone the repository.

Navigate to the frontend directory and run

  npm install   // install dependencies
  npm start     // start the server

Navigate to the backend directory and run

  npm install   // install dependencies
  npm start     // start the server

This project showcases my proficiency in React and related technologies, emphasizing clean code practices, efficient state management, and seamless user interactions. The commitment to continuous improvement is reflected in the adoption of modern tools and best practices, making it a valuable asset in my journey as a React developer.