Knowledge that covered during building this project:
Backend-> FS1020: nodejs, REST API (How to set up routes for different api.), nodemon, JWT authentication and authorization, how to save data and get data by using file system. How to write Middleware to check validation such as email, password etc. How to solve the problem of Cross-origin issue. Using Postman testing and debugging backend issue. How to use VScode debugging code. Password encryption.
FS1000: Javascript datatype, operator, functions, array, object, what is json, how to use “this”, ES6 related knowledge such as how to use promise, async await to get data from json file. How to use local storage to save data (token) for authorization. What is cookie, session and how to use them in real scenario. How to manipulate DOM. Html, CSS also included during this course.
FS1010: How to build a React Web app by using react scaffolding. UI frameworks (Material UI) to build a uniform and responsive theme, UI/UX design related resources. How to pick font, color pattern layout inspiration. Consider web accessibility. Checklist for graphic designer. React related knowledge. Such as class component and function component. React hooks and redux related knowledge. Authentication part (login& signup) uses redux, store, reducer thunk and action knowledge. How to use formik + Yup for form creating and validation at the frontend. React UI component and how to use it. Axios and fetch to get data from server side. React-loader-spinner showing loading status. Using styled-component and sass for CSS of this project. React router to navigate different pages. How to customize material UI component style. Using Figma building each page UI layout before coding. How to use JavaScript basic knowledge in react project.
Before starting this project, I did some research about color pattern and font choice according to my instructor’s resources. Finally, I decided using purple as main theme color and 2 font families for text display. For UI design, I make it as simple as possible and leave much more white space, making people focus content in the middle of the screen. Whatever things I want to show to the audient, I follow the principle that is everything I put, even it is a tiny thing, should has a meaning. I also consider some people has eye issue, so there is a choice for them adjusting background color. For animations, I don’t add a lot as it is easy to let people distraction. All animations are subtle and gentle.
I learned how to convert my previous portfolio to react version by using JSX. At course FS1000 we also built portfolio by html CSS and JavaScript. After learning react, we convert it to react project.
Home page, using sliders showing my personal side project screenshots. It can change automatically but also can use arrow button select the page. Navigation bar also include a dropdown menu. Footer can toggle the theme mode (light or dark). Also including social media links of mine. This footer and navigation bar are included in all pages. Once click my work button, it will guide you to my projects page.
Work page, using material UI card to display my previous personal projects, including my project name, which knowledge I was used and brief introduction about this project. When you click it, it will go to project detailed page to display the project screenshot and description. In the banner there is a video play button, once click, it will show a video about one of my previous WeChat mini program video demo. Maybe in future, I have some videos posted on YouTube, I will change this fake link to a real video.
Skill Page is simple layout, including download my resume link as a PDF file. Also listed what I have learned during this full-stack web program and what I can work on. Showing my photo in here instead of home page as I want audient focusing on my projects instead of my looking. When you hover the service, you can see a very gentle animation.
Contact form page I used material UI to build a form, here you can check each field if input correctly. If something missing, it will show the error outline to warn you. Here also use React hooks to set the “send message” button changing to “send successful” if all data are correctly. This information will send to backend and save as a json file.
Register page has 2 buttons. One is “login” and the other is “signup”. If you want to become a member, you can go to sign up and fill the form which created by formic+Yup. This information will pass to backend and save to another user.json file. Then we can go to “login” page, correctly write the user information and as the token was saved in bowser session, after pass authorization, this person can check the dashboard table list, which included all the contact form info that we input before. If this user cannot pass the authorization, he/she cannot go to dashboard this page. Here I am using redux and redux-session npm to make it work. Meanwhile, if the signup or login each field doesn’t input correct information, user can get notification at the frontend.
My painting page I designed is for my personal hobbies. I love painting very much and have a lot. Here I just call unsplash api to grab random painting listing here by using axios. You can search painting topics to find your favorite part and for each painting I am using a npm plugin to display this painting’s details. In the future, I plan to add my own paintings once this web app alive.
As I am using material UI framework at the frontend, so this whole website is fully responsive. Before start, I was considering use media query for handling mobile version but as it is very complex, I decided to use UI framework make things much easier.
