This project is a simple directory application built using React. It displays a list of contacts in a card format, along with a navigation bar and a footer.
The project consists of the following components:
App.js
: The main component that renders the navigation bar, the list of contacts, and the footer.Data.js
: A file that exports an array of contact objects.Card.js
: A component that displays the details of a single contact.Navbar.js
: A component that renders the navigation bar.Footer.js
: A component that renders the footer.
To use this project, follow these steps:
- Clone the repository to your local machine.
- Navigate to the project directory.
- Run
npm install
to install the dependencies. - Run
npm start
to start the development server. - Open
http://localhost:3000
in your browser to view the application.
To customize the list of contacts, modify the Data.js
file. Each contact is represented as an object with the following properties:
name
: The name of the contact.email
: The email address of the contact.phone
: The phone number of the contact.image
: The URL of the contact's image.
To customize the navigation bar and the footer, modify the Navbar.js
and Footer.js
files, respectively.
This is a react front end project traversing through the file which is data.js and rendering the elements from data.js as mapped to render so.
- React
- JavaScript
- HTML
- CSS
This project is licensed under the MIT License.