@rh_packages/create-simple-dashboard v1.0.0

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Project structure {#project-structure}

Repository for SparkCard Frontend : https://github.com/sparkfintec/sparkcard_frontend

By Cloning the repo, we will get the below folder structure :

root folder
├── components
│   ├── Card.tsx
│   ├── Header.tsx
│   └── Layout.tsx
├── constants
│   ├── contextConstants.ts
│   ├── cssConstanstants.ts
│   ├── notifyConstants.ts
│   └── validatorConstants.ts
├── context
│   ├── NotifyContext.tsx
│   └── UserContext.tsx
├── data
│   └── state.ts
├── hooks
│   ├── cardholder
│   │   └── useCreateCardHolder.ts
│   ├── customer
│   │    ├── useCreateCustomer.ts
│   │    └── useSearchCustomer.ts
│   ├── user
│   │    ├── useLogin.ts
│   │    ├── useSignup.ts
│   │    └── useLogout.ts
│   ├── wallet
│   │    ├── useCreateWallet.ts
│   │    └── useConfirmWallet.ts
│   ├── useAuthContext.ts
│   └── useNotifyContext.ts
├── pages
│   ├── login
│   │   └── index.tsx
│   ├── my_card
│   │   └── index.tsx
│   ├── onboard
│   │   └── index.tsx
│   ├── settings
│   │   └── index.tsx
│   └── shipping_info
│      └── index.tsx
├── public
│   ├── card.png
│   ├── favicon.ico
│   └── logo.png
├── styles
│   ├── card.module.css
│   └── globals.css
├── validators
│   ├── requestSchema.ts
│   └── validator.ts
├── .env
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

Project structure rundown {#project-structure-rundown}

• /components/ - Contains all the components which can be used in multiple pages.
• /constants/ - Contains the constants which can be used in application.
  • /constants/contextConstants.ts - Constants which are used in various context.
  • /constants/cssConstants.ts - Constants which can be used in CSS.
  • /constants/notifyConstants.ts - Constants which are used to show in the notification msg or description.
  • /constants/validatorConstants.ts - Constants which are used in various validatios.
• /context/ - Contains different contexts which can be used in application, NotifyContext has data used for showing notification and UserContext has data for the user.
• /data/ - This folder can be used to store any static data.
• /hooks/ - This folder includes all the custom hooks that are used for interacting the backend services.
  • /hooks/cardholder/ - This folder includes hookes related to cardholder.
  • /hooksuser/ - This folder includes hookes related to user.
  • /hooks/wallet/ - This folder includes hookes related to wallet.
  • /hooks/useAuthContext.ts - Hooks related to AuthContext.
• /pages/ - This folder includes all the pages in the application.
  • /login/ - This page is the login page that is rendered on /login.
  • /onboard/ - This page is the onbaord page that is rendered on /onboard.
• /public/ - Static directory that includes any images, svg, etc. Any contents inside here will be copied into the root of the final build directory
• /styles/ - This the Styles folder that includes any CSS file or globals CSS.
• /.env - A .env config file containing the environment variable which are used in application. That may include backend URI, others sensitive data or key.
• /next.config.js - Config file for Next js.
• /package.json - Standard package.json file which is used to create node projects . You can install and use any npm packages you like in them
• /tailwind.config.js - Config file for using tailwind CSS.
• /tsconfig.js - Config file for TypeScript.