Tweet User Cards App

Description

Welcome to our project! This is a Tweet User Cards App made in JS and React. This application allows you to view user cards, displaying information such as the user's photo, the number of their tweets, and the number of their followers. Additionally, it provides functionality to add yourself as a follower of a specific user. This can be achieved by clicking the "Follow" button. Upon clicking the button, its appearance changes, and the follower count increases in the counter.

Installation

1. Clone the repository:

   git clone https://github.com/sergio-nezhigay/tweets.git
   

2. Navigate to the project directory:

   cd tweets
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm start
   

5. Open the application in your browser:

   http://localhost:3000
   or just run from https://sergio-nezhigay.github.io/tweets
   
   

Usage

1. Upon opening the application, you will see a list of user cards.
2. Each user card displays the user's photo, tweet count, and follower count.
3. To follow a user, click the "Follow" button on their card.
4. The button appearance will change to indicate that you are now following the user.
5. The follower count will increase by one in the counter.
6. To unfollow a user, click the "Follow" button again.
7. The button appearance will revert to its initial state, and the follower count will decrease by one in the counter.

Technologies Used

• React: A JavaScript library for building user interfaces.
• CSS: Cascading Style Sheets for styling the application.

Resources

• Figma Mockup - The design reference for the user cards.

Credits

This application was created by Serhii Nezhihai. Feel free to contact me at [email protected].

Contributing

We welcome any and all contributions! Here are some ways you can get started:

1. Report bugs: If you encounter any bugs, please let us know. Open up an issue and let us know the problem.
2. Contribute code: If you are a developer and want to contribute, follow the instructions below to get started!
3. Suggestions: If you don't want to code but have some awesome ideas, open up an issue explaining some updates or imporvements you would like to see!
4. Documentation: If you see the need for some additional documentation, feel free to add some!