DEV Community

Cover image for Let's Build React Card App
Kiran Naragund
Kiran Naragund Subscriber

Posted on • Edited on

Let's Build React Card App

#javascript #react #css #beginners

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
Enter fullscreen mode Exit fullscreen mode

Step 2 : Navigate to your project folder

cd cards
Enter fullscreen mode Exit fullscreen mode

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

  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
Enter fullscreen mode Exit fullscreen mode

Step 2: Open your web browser and enter the following URL in the address bar:

http://localhost:3000/
Enter fullscreen mode Exit fullscreen mode

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

favicon github.com

Top comments (4)

Collapse
 
sidharrth profile image
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

Collapse
 
dev_kiran profile image
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";
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
sidharrth profile image
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.
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
dev_kiran profile image
Kiran Naragund •

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

Read next

moibra profile image

Top APIs Every Frontend Developer Should Use in 2025

Mohamed Ibrahim -

plsankar profile image

Clip-Path Circle Reveal Animation With Mouse Movement

Lakshmi Sankar -

philippe profile image

How to setup the favicon of a React app

Philippe Bernard -

ujjwal_kr_gupta profile image

Express 5 is here, what’s new?

UJJWAL GUPTA -