Simple Business Card Generator with a live preview and option to download the card in png format.
https://business-cards-generator.netlify.app
This is the Lighthouse Google report showcasing Performance 🚀, Accessibility ♿️, Best practices ✅, and SEO 🔍.
Contains About Me, Experience, Skills, Projects, Contact, Resume, Email, Footer
also contains bad humour!
| Technology | Description | Link |
|---|---|---|
| Node.js | Server-side JavaScript runtime | Node.js |
| NPM | Node.js Package Manager | NPM |
| Font Awesome | Icon set and toolkit | Font Awesome |
| downloadjs | File downloading utility | downloadjs |
| html-to-image | HTML to image conversion | html-to-image |
| million | Large number formatting | million |
| mini-css-extract-plugin | Webpack plugin for extracting CSS | mini-css-extract-plugin |
| react | JavaScript library for building UIs | react |
| react-dom | React rendering for the DOM | react-dom |
| react-scripts | Create React App scripts | react-scripts |
| react-tilt | React component for tilting elements | react-tilt |
| styled-components | CSS-in-JS library for styling | styled-components |
| web-vitals | Web performance metrics | web-vitals |
| @craco/craco | Create React App configuration overrider | @craco/craco |
| @types/react | TypeScript type definitions for React | @types/react |
| @types/react-dom | TypeScript type definitions for ReactDOM | @types/react-dom |
| @vitejs/plugin-react | Vite plugin for React apps | @vitejs/plugin-react |
| eslint | JavaScript linter | eslint |
| eslint-plugin-react | ESLint plugin for React | eslint-plugin-react |
| eslint-plugin-react-hooks | ESLint plugin for React Hooks | eslint-plugin-react-hooks |
| eslint-plugin-react-refresh | ESLint plugin for React Refresh | eslint-plugin-react-refresh |
| vite | Frontend build tool | vite |
| Netlify | Web hosting and automation platform | Netlify |
Users can clone the code and run npm install to install the dependencies
npm install
Afterwards users can run the command npm run build which will run the Vite build process which will bundle the React source code
npm run build
Afterwards users can run the command npm run dev which will executes the vite command, which starts the development server provided by Vite
and allows users to run the code on their local host
npm run dev
This sequence ensures that your client-side code is built before starting the server.
Package.json dependencies ⚙️
Screenshot of Header
Have a look around!! Link to deployed application https://business-cards-generator.netlify.app
Screenshot of Header
Screenshot of Form
GIF Showing npm run dev Homepage, form input and download feature
as well as Email functionality
This project is licensed under MIT
Brian Trang
N/A
If you have any questions about this project, please contact me directly at brian.trang9@gmail.com. Feel free to view more of my projects at https://github.com/MakeRedundant.