Let's Build React Card App
Tags: javascript, react, css, beginners
Published: 2023-11-08 09:11:44

**Welcome, Developers!**
Are you ready to dive into the world of ReactJS and CSS styling? In this article, we'll build a stylish Card App with React, featuring "Your," "All," and "Blocked" tabs for card management. Learn how to apply React components, hooks, and CSS styling to create a beautifully organized and visually appealing card experience. By the end, you'll have a well-designed card management app and a deeper understanding of React and CSS. Let's get started! 🚀👨‍💻


## Pre-requisites:

- ReactJS
- CSS
- JSON


## Functionalities:
- **Display** well designed list of cards with their details, including name, budget name, amount, frequence, expiry, spent, and balance.      
- Cards in the app come in two varieties: **"burner"** and **"subscription."**    
- Search cards using **search by card name**.      
- Toggle between different tabs **"Your," "All," and "Blocked"**  to view cards owned by the user, all cards, and blocked cards.         
- Click on the filter button to toggle the visibility of the card type dropdown.      
- **Filter cards** by card type using a dropdown menu.   
- **Add or Update Cards:** If you want to add more cards or update the existing cards you can do that by defining another card or updating the existing card details in mockApiResponse.
- **Delete Cards:** If you want to remove the cards, you can do that by deleting the corresponding block of data in mockApiResponse . 


## Approach:
**We will follow this approach for successfully building the application:**

1. **Set Up:** We will initiate the project with a React setup to create a solid foundation for our app.
2. **Implementation:** We will start implementing our react components and rendering card information.
3. **Styling:** Using CSS to style the components and make the app visually appealing.(App.css)
4. **Testing:** Testing the application by running it locally, ensuring it works smoothly and all the functionalities are working correctly.


## Steps to Create the Application:
**Step 1 :** Set up your React project with the following command in your preferred code editor (e.g., VSCode)
```
npx create-react-app cards
```
**Step 2 :** Navigate to your project folder
```
cd cards
```
**Step 3 :** Implement the code in the respective files as mentioned, such as App.js, App.css.
**Step 4 :** Create a folder Images and paste images for card types.


## Project Structure:

![Project Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7thk0ohbb1tqsv0p8vzk.png)

1. **App.js:** This is the main entry point, all the react code is implemented here to compose the user interface.
2. **App.css:** This file contains design of the card App.
3. **Images:** Create Images folder in the src directory which will have 2 images for representing and categorizing the cards as Burner and Subscription.

## Steps to Run the Application:
**Step 1:** In your terminal, run the following command:
```
npm start
```
**Step 2:** Open your web browser and enter the following URL in the address bar:
```
http://localhost:3000/
```

**Congratulations🎉!! You have successfully built the application.**

_Complete source code of project is available on my GitHub repo [Click here](https://github.com/Kiran1689/card-app)_

{% embed https://github.com/Kiran1689 %}