A web app using React to enable users to design business cards and manage them in personal account
| Demo of Create card page |
|---|
| Login page | Register page |
|---|---|
| Create Card page | Edit Card page |
|---|---|
| My Cards page | Logo image |
|---|---|
- This app helps users to create business cards unlimitedly and manage(generate, edit, and delete) them in personal account.
- This app is a project based on the skeleton of an online course for React, however, I upgraded this project to add more features as I planned.
-
Original version:
- Only two-paged application (Login and Editor page)
- Manage add,edit, and delete on single page (router not changed)
- CSS style is simply and boring
-
My version:
- Add customized email&password login (Firebase Authentication)
- Add register page (Firebase Authentication)
- Add Router (
/cards,/cards/new,/cards/:id) - Customized CSS style and responsive design
- Separately managing delete, add, and edit features using
router - Make reusable compoent for
addCardandeditCardto enable preview card imageuncontrolled component-->controlled component
- Add Theme color picker
- Customized
Choose Imageloader and show file name
- Understanding how
nested routingworks in web application - Handling authentication by utilizing
Firebase Authentication - Applying the fundametal concepts of
Reactto my application
- React.js (create-react-app)
- Firebase Authentication and Firebase Realtime Database
- Cloudinary (managing uploaded images)
- PostCSS
- react-router
- Figma
-
Login/Log out and Register
-
Managing features:
-
Create new cards
-
Edit cards
-
Delete cards
-
Pick card's color
-
Preview card (both
createNewCardandeditCardavailable) -
Upload images
-
Access with Router
- The most difficult task in this application was nested routing.