https://github.com/charlesyuan02/waifu-list-frontend
A ReactJS front end for my upgraded waifu list. Axiom for REST API calls from my back end. Deployed on Firebase.
https://github.com/charlesyuan02/waifu-list-frontend
axiom azure firebase react reactjs
Last synced: 2 months ago
JSON representation
A ReactJS front end for my upgraded waifu list. Axiom for REST API calls from my back end. Deployed on Firebase.
- Host: GitHub
- URL: https://github.com/charlesyuan02/waifu-list-frontend
- Owner: CharlesYuan02
- License: mit
- Created: 2022-10-09T00:40:10.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-10T21:52:39.000Z (over 3 years ago)
- Last Synced: 2025-04-06T03:12:51.804Z (over 1 year ago)
- Topics: axiom, azure, firebase, react, reactjs
- Language: JavaScript
- Homepage: https://charles-waifu-list.web.app/
- Size: 292 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# waifu-list-frontend
This is the front end for my waifu list. Currently it's same design as my old one, just with all the functionality implemented with React. I thought I'd start simple. Also, I'm really bad at UI/UX design. But, at long last, may I present: My finished waifu list!
## Getting Started
To get started locally, clone the repo and install the necessary dependencies (React, Axiom). Then:
1. Message me for the .env file. It exposes the Supabase bucket which I use to store all the waifu images, so I didn't want to include it here.
2. npm start
### Prerequisites
```
node@16.15.0
@testing-library/jest-dom@5.16.5
@testing-library/react@13.4.0
@testing-library/user-event@13.5.0
axios@1.1.2
react-dom@18.2.0
react-scripts@5.0.1
react@18.2.0
web-vitals@2.1.4
```
## Built With
### ReactJS
Basically, I converted all the direct database calls from my previous project to Axiom REST API calls to my back end. Then, I saved the results to a React state and rendered it as a component.
### Supabase
I'm not using the Supabase package directly here, but instead just loading the images stored in a bucket from the public url.
### Firebase
Since I switched to deploying the back end on Microsoft Azure, which auto-generates a SSL certificate for the domain name, I can now deploy using Firebase.
## To Do
### State Management w/ Redux
If I ever decide to expand my waifu list web app here into something larger, I'll utilize Redux in order to properly manage all the different React states.
## License
This project is licensed under the MIT License - see the LICENSE file for details.