credit-card-luhn-validation is a comprehensive web application developed in response to the challenge set by Project Broadcast. The primary objective was to craft a fully responsive website where a user is able to enter a credit card number into a React based UI where the validation logic is handled by an express powered api, providing users with a dynamic and user-friendly experience.

This project was bundled with create-turbo.

Frontend deployed by Vercel Backend deployed by Render

• Demo
• Project Structure Front
• Project Structure Back
• Features
• Getting Started
  • Installation
  • Environment variables Front
  • Environment variables Back
• Tech Stack
• Api documentation
• Usage
• Future Improvements
• Walkthrough

You can see a live demo of credit-card-luhn-validation here!.

• src/app code base for app;
• src/components components isolated with their styling;
• src/components/ui shadcn components to use;
• src/context context for flobal state management;
• src/hooks hook for handling snackbar data state;
• src/mocks mocks credit card;
• src/models credit card model;
• src/services cardServices for async operations;
• src/utils utils cn file;
• src/utils/validators validators used;
• src/utils/masks masks used;

• src/__tests__ tests for app routes;
• src/controllers controller class to handle route actions;
• src/middlewares middleware used on validation route;
• src/schemas schema used by Mongoose to create the Card Model;
• src/routes.ts exports all the project used routes;
• src/utils logger and luhn's validation function;
• src/app.ts app class initializing middlewares, database and routes;
• src/index.ts starts the server;

• Responsive Design: Implemented a fully responsive layout.

• 3D Animated Card: card was animated with pure css using preserve 3D.

• Card Validation: Express powered api routes that validates provided credit card using luhn alghorithm.

• Card List Database: Implemented database that can save and delete accepted cards.

• UI: React 18
• frontend: a Vite single page app
• backend: an Express server
• State Control: Context for global state
• Styling: Tailwindcss and Shadcn-ui powered by Radixui
• HTTP Client: Axios
• Icons: lucide-react
• Testing: Jest
• Database: MongoDB
• Object Data Modeling: Mongoose
• scripts: Jest and ESLint configurations
• packages/typescript-config: tsconfig.json's used throughout the monorepo
• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

1. Clone the repository:

   git clone https://github.com/guiduck/credit-card-luhn-validation.git

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

   Frontend Environment Variables

4. Create a .env File:

   • Create a file named .env.local(or .env.production for production environment) in your project's root folder.

5. Define Environment Variables:

   • In the .env.[environment] file, define your environment variables in the following format:

     VARIABLE_NAME=variable_value
     

   Replace VARIABLE_NAME with the name of your variable and variable_value with the actual value you want to set.

6. Example:

   • local:

   VITE_API_URL=http://localhost:5001/
   

   • production:

   VITE_API_URL=https://credit-card-luhn-validation.onrender.com/   
   

   Backend Environment Variables

   Create a .env File:

   • Create a file named .env in your project's root folder.

   • In the .env file, define your environment variables:

    PORT=5001
    DB_URL=mongodb+srv://guiduck02:[email protected]/?retryWrites=true&w=majority
   

• The endoint "api/cards" is used to create(if validation is successful), list and delete the cards.

• validate and create
  • POST /api/cards
    • Payload

       {
           "holder": string,
           "creditCardNumber": string,
           "expires": string,
           "cvc": string
       }

    • Success Response

       {
           success: boolean,
           data: card object,
           message: string,
       }

    • Error Response

       {
           error: string,
       }

• list cards
  • GET /api/cards
    • Success Response

       { 
          data: [cards object]
       }

    • Error Response

       { 
          error: string
       }

• delete cards
  • DELETE /api/cards
    • Success Response

       {
          success: boolean,
          message: string
       }

    • Error Response

       { 
          error: string
       }

Visit http://localhost:3001 to explore the application. Type in the credit card input, interact with the card animation, and experience the real-time data updates through the database.

Visit http://localhost:5001 to explore the backend api.

While developing checkout page, I am primarly focused on enhancing user experience and functionality:

• UI: the ui was designed very carefully, but while developing I had many ideas and little time to explore.

• Input Validation: All frontend validations are being handled manually, it would be preferable to use a lib(react-hook-form or formik).

This project is licensed under the MIT License - see the LICENSE file for details.