Lets Learn ReactJS with GIFs :)
A simple application developed using ReactJS and FastAPI. This web application can be used to collect multiple gifs & wrap up into gift packs. After the gift Wrapping, it could get us a shareable link to share with our friends.
Backend
- Python 3.8.5
- FastAPI
- Pydantic
- psycopg2 -- PostgreSQL 13
(check the pipefile for detailed info on the required packages -- install them using pipenv install after cd <project_repo>)
Frontend
- ReactJS
- Axios
- React-Bootstrap
API Endpoints
[GET] /api/gift_wrap/{id}[DELETE] /api/gift_wrap/{id}[GET] /api/all_gift_wraps[POST] /api/gift_wrap
Swagger UI documentation will be available on running the application on
[GET] /docs
Ways to Improve:
- Proper Authentication - JWT (current the application doesnot have any authentication used)
- Adding a secure gift unwrap (using password to unwrap the gift so that the gift reaches only the authorised person)
- Update the ORM modals and the definition of the Scheme with the additional data as needed for the authentication system.
- UI/UX can be further improvised (gift wrap/unwrap animation, dashboard look etc).
- Middleware can be re-defined for making this an advanced application.
Application working screenshots
- Gifting Page (add gif/img urls via this page)
- Wrapping Gifts (On clicking wrap button, we get the sharable URL)
- Shared Gift (this is how the shared gift URL looks on opening)
- Unwrapping Gift (In the shared gift page, click on the gift wrapper to reveal the gif/img gift )
- 404 Page (In case of incorrect/un-approved URL is accessed from client)
