CardGenius ID Card Generator

CardGenius ID Card Generator is a web application built using the MERN (MongoDB, Express.js, React.js, Node.js) stack. It allows users to generate ID cards based on their personal details.

Explore the docs »

View Demo · Report Bug · Request Feature

Live Preview Project

Live Preview

Features

• Generate ID cards based on personal details
• Download ID cards as PNG
• Save ID cards to database
• View saved ID cards
• Delete saved ID cards

Built With

• React.js - HTML enhanced for web apps!
• React Redux - A Predictable State Container for JS Apps
• Redux Toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
• React Router - Declarative routing for React.js
• Tailwind CSS - A utility-first CSS framework
• Vite.js - Next Generation Frontend Tooling
• Axios - Promise based HTTP client for the browser and node.js
• MongoDB - NoSQL Database
• Express.js - Fast, unopinionated, minimalist web framework for Node.js
• Node.js - JavaScript runtime built on Chrome's V8 JavaScript engine
• Mongoose - Elegant MongoDB object modeling for Node.js
• JWT - JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties
• Bcrypt - A library to help you hash passwords
• Multer - Node.js middleware for handling multipart/form-data, which is primarily used for uploading files
• Cloudinary - Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline

Getting Started

Prerequisites

• Node.js - JavaScript runtime built on Chrome's V8 JavaScript engine
• NPM - Node Package Manager

Installation

1. Clone the repo

git clone https://github.com/itxSaaad/cardgenius-app-mern.git

2. Install NPM packages

npm install

3. Create a .env file in the root directory and add the following

NODE_ENV=development
PORT=5000
MONGO_URI=<YOUR_MONGODB_URI>
SALT=<YOUR_SALT>
JWT_SECRET=<YOUR_JWT_SECRET_KEY>
CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>
CLOUDINARY_API_KEY=<YOUR_CLOUDINARY_API_KEY>
CLOUDINARY_API_SECRET=<YOUR_CLOUDINARY_API_SECRET>

4. Create a .env file in the client directory and add the following

VITE_CLIENT_URL="http://localhost:5173"
VITE_SERVER_URL="http://localhost:5000"

5. Run the app

npm run dev

Contributing

Contributions are what make the open-source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the repo
2. Clone the project
3. Create your feature branch (git checkout -b feature/AmazingFeature)
4. Commit your changes (git commit -m "Add some AmazingFeature")
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a pull request

Contact

• Twitter: @itxSaaad
• LinkedIn: @itxSaaad
• Bento: @itxSaaad
• Email: saadstudent.cs@gmail.com

License

Distributed under the MIT License. See LICENSE for more information.

Support

Give ⭐️ if you like this project!