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:

Set Up: We will initiate the project with a React setup to create a solid foundation for our app.
Implementation: We will start implementing our react components and rendering card information.
Styling: Using CSS to style the components and make the app visually appealing.(App.css)
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:

App.js: This is the main entry point, all the react code is implemented here to compose the user interface.
App.css: This file contains design of the card App.
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

Kiran1689 (Kiran Naragund) · GitHub

Full-Stack Developer 👨‍💻 • Mentor @Exercism 👨‍🏫 • Open-Source Contributor 😎 • Tech Writer & Moderator @forem ✍ • Developer Advocate - Kiran1689

github.com

Let's Build React Card App