Skip to content

React app displaying a contact directory. Uses Navbar, Card, and Footer components. Contact data fetched and mapped with Data component. Props passed to Card for display. Responsive layout.

Notifications You must be signed in to change notification settings

emadnahed/ReactCatsGallery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Directory App of Cats:

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.

Project Structure

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.

Usage

To use this project, follow these steps:

  1. Clone the repository to your local machine.
  2. Navigate to the project directory.
  3. Run npm install to install the dependencies.
  4. Run npm start to start the development server.
  5. Open http://localhost:3000 in your browser to view the application.

Customization

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.

More information

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.

Snap: Screenshot 2023-04-19 at 5 40 37 PM

Technologies Used

  • React
  • JavaScript
  • HTML
  • CSS

License

This project is licensed under the MIT License.

About

React app displaying a contact directory. Uses Navbar, Card, and Footer components. Contact data fetched and mapped with Data component. Props passed to Card for display. Responsive layout.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published