This is the first MERN (MongoDB, ExpressJS, ReactJS, NodeJS) project I build from scratch. The styling is supported by TailwindCSS. Redux is used as state manage system. React Router is incorporated to support the navigation. Users can search for recipes based on the ingredient(s), signed-in users can archive recipes. The authentication process is very simple, supported bu Google OAuth.(Only email will be accessed, not other information will be collected). As there will be async API fetching and form submission, middleware such as Redux Form, Redux Thunk are implemented.
1. Maximized the code reusability by creating truly reusable components that are 100%
configurable and
implemented across the App.
2. Even though I already mentioned this, but this is the first time I incorporate authentication
into the project.
So the web app is more real-like.
3. Actions like "archive recipe", "go to my archive" is only available when user is signed-in. I
leveraged Redux to
store the user sign-in status to make sure all components share the same information.
4. I imported the Plain Router instead of the Browser Router so that I can create my own history
which can be accessed
anywhere in the project. So I can add page-switching logic in the Redux action creators.
This project pretty much covers all the things I have learned during the Winter Break. I know
you probably
think using Redux, Redux Form .etc for this app is a overkill, but I consider it as a really
good chance to summarize my learning. Plus,
the project could be easily expend to something bigger, and then Redux would definitely come in
handy. Although I am not super
satisfy with my API configuration, simply because I am not quite familiar with each of the
status code, it was sufficient enough
to support this app.
I definitely got more familiar with the Redux, to be honest this project gives me many 'oh'
moments, and each
one of it makes me have a better understanding of Redux. I also learned that some time you
cannot expect the state
in redux store to be always correct. In this project, the user sign-in status is stored in redux
store.
since it is a async operation, if the user reload the page the recipes they archived may not get
displayed
as there be a short period redux store think user is logged off, so I need to pass in the user
ID by myself.
1. User could have more control of how they want their search result be. The Redux Form I
implemented would come in
handy.
2. Increase the user experience by adding a pop-up modal when user archive/delete recipes. The
function could be done by using
React Portals.