Let's Build React Card App

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:

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

Kiran1689 (Kiran Naragund) · GitHub

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

github.com

Comments

[Siv Deploys]

As is github code Compile Results:
12 vulnerabilities (5 moderate, 6 high, 1 critical)
11 deprecated modules

(node:14620) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit

As is github code Run Results:
[eslint]
src\App.js
Line 274:82: 'burnImage' is not defined no-undef
Line 275:88: 'subscriptionImage' is not defined no-undef

[Kiran Naragund]

Hello @sidharrth

• To address the vulnerabilities(While it's not strictly mandatory) Please run the command npm audit fix

• In the App.js file please import the images as shown below:
  

import React, { useState, useEffect } from 'react';
import './App.css';
import burnImage from "./images/fire.png";
import subscriptionImage from "./images/reuse.png";

Thank you for pointing it out, I will update the repo ASAP.

[Siv Deploys]

Thanks for the heads-up. Just wanted to make sure to improve the quality of submissions with less or no errors. Helps Other Devs and Newbies. 

[Kiran Naragund]

You're welcome! I appreciate your commitment to quality❤