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.
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
- Clone the repo
git clone https://github.com/itxSaaad/cardgenius-app-mern.git
- Install NPM packages
npm install
- 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>
- Create a
.env
file in the client
directory and add the following
VITE_CLIENT_URL="http://localhost:5173"
VITE_SERVER_URL="http://localhost:5000"
- 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!
- Fork the repo
- Clone the project
- Create your feature branch (
git checkout -b feature/AmazingFeature
)
- Commit your changes (
git commit -m "Add some AmazingFeature"
)
- Push to the branch (
git push origin feature/AmazingFeature
)
- Open a pull request
Contact
License
Distributed under the MIT License. See LICENSE
for more information.
Support
Give ⭐️ if you like this project!