Skip to content

S-a-b-b-i-R/vitalScans-client-side

Repository files navigation

Technologies Used

Vite React TailwindCSS DaisyUI React Router Firebase MongoDB Express.js React Query JWT Mongoose Stripe

Features

  • User Dashboard User can sign up and login to the app using their email and password. User can also sign in using their Google account. After signing up or logging in, users will be routed to the dashboard, where they will see menus based on their role (default: "user"). Users can update the profile, see their upcoming tests, get reoports of their past tests and view their payment history.
  • Admin Dashboard When an admin logs in, they will be routed to the admin dashboard. Admins can create new tests, view all tests, view all users, view all payments, create reports for taken tests. Admins can also create test slots for users to take tests. Admins can also create new admins, block and unblock user, create and select active banner for the home page. There are 2 charts for top selling tests in the admin home route. Admin dashboard is protected and only accessible to admins.
  • Featured Test Featured test in the home page shows top three tests that are sold the most. These are calculated at the backend automatically each time the home page data is fetched.
  • Pagination Pagination is implemented where necessary.
  • Filter By Date Date based slot filtering has been implemented, so that when a user logs in, they will only see the slots that are available for the current and future dates.
  • Test Reports Once a user takes a test, they will be able to see the status of the report in their dashboard. The report will be generated by the admin and will be available for the user to download.
  • Payment Gateway Stripe payment gateway has been implemented. Users can pay for the tests using their credit or debit cards. Payment is handled by Stripe and the app only stores the payment information in the database.
  • Real time data render using TanStack Query I have used React Query to fetch data from the back-end and render it in the front-end. React Query also caches the data and updates it in real time. So when an user applies for a job, the applicants number gets updated in real time.
  • JWT Tokens I have used JWT tokens to authenticate users. When a user signs up or logs in, a JWT token is generated and stored in the local storage of the client. When the user logs out, the token is removed. This token is used to authenticate users and protect routes where token is validated before returning data.
  • Firebase The app is using Firebase for authentication. Firebase is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services such as a realtime database, cloud storage, authentication, crash reporting, machine learning, remote configuration, and hosting for your static files. I have used Firebase to create a user authentication system for the app.

Demo