A React web app project from the Udemy course - The Complete React Web Developer Course by Andrew Mead
-
Integration with Firebase:
-
Authentication with Google account
-
User based security to control data access on a per-user basis
-
-
Manage expenses with basic functionalities:
-
Create, remove and edit expense
-
Search existing expenses
-
Display expenses by date or amount
-
Filter expenses by a time span
-
-
Responsive web design
-
Authentication with Facebook account
-
Better user experience:
-
Render skeleton-ish screen while loading data
-
Confirmation modal when removing expense
-
Show username and greeting
-
Display number of hidden expenses while searching or filtering expenses
-
Custom NotFound page
-
-
Error handling for authenticatoin
-
Customize react-dates' date picker for better UI on mobile
-
Link multiple auth providers to an account
-
Code splitting to optimize load time at second visit
-
Add hashes to filenames for cache-busting
The data concerning Firebase configuration have been hidden deliberately, so the app cannot be run with its features on your local machine. If you would like to run it locally, please create your own Firebase project following the official setup guide.
git clone https://github.com/lucasweng/budget-app.gityarn installIn the root folder of this project, create a file named .env.development with:
FIREBASE_API_KEY=YOUR_API_KEY
FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
FIREBASE_DATABASE_URL=YOUR_DATABASE_URL
FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
yarn dev-serverVisit http://localhost:8080
Some comments in the source code are course notes and therefore might not seem necessary from a developer's point of view.
TL;DR: the HTML output might be of the production version, so the dev-server cannot access the correct JS source file.
Re-build the development version by running:
yarn run build:devThen start the webpack-dev-server again with:
yarn dev-serverIn this project, there are two versions of webpack configuration that produce JS files with different naming method. In order to correctly access those output files every time we build, webpack is set to automatically generate HTML files and wire them up to JS files with varying names. However, the webpack-dev-server is set to be serving outputs of the development version for the existing HTML file without generating a new one. So, it is likely to have the production version HTML be served with the development version JS file when running the dev-server, and that would therefore render nothing on the page.
If you would like to run the tests:
yarn test