Web Front-End Development Project2 Journal

This is the work-in-progress journal for Web Front-End Development project 2. It is linked to the classed portal or here. I will post the process I go through in researching, defining, experimenting, failing, and succeeding in my project 2 works.

Project 2 is a group project where I'll have an opportunity to build an interactive single-page web app using a JavaScript framework. This could be a game, an interactive art piece, or an informative website. Just make sure I will start from scratch, don't try to add on to something I've already created.

Requirements:

• Build my app using a JavaScript framework like React or Vue.js. Talk to Alieen if I'd prefer to use a different framework.

• The ideal size for a group is 2-3 class members. I can go to 4 but the larger the team the more coordination is required.

• This should be a collaborative effort. How each group splits up the work is up to the discretion of the team members just make sure members are all in agreement.

The milestones for this project will follow the process outlined in Thinking in React (Links to an external site.). Each team member should be journaling about the process through the project and can link to one copy of any documents needed for a milestone.

Project 2 milestone 1 11/09/2021

My journal entries should include the following:

• Description of your project including the inspiration, and intended audience for my project.

• Content or sources needed for my project.

• Visual design for my project. This could be a sample mockup or hand-drawn sketch.

• List of team members.

For project 2, I want to make a web-based serverless real-time bookkeeping app. The frame I choose to use is React and also use Firebase as the database storage for data manipulation. Also, I have read through the Firestone authentication feather, I am also thinking about using this as a login in the process.

Project 2 milestone 2 11/18/2021

A static version of your app along with a detailed component hierarchy including a representation of the state. Spending time on this phase and creating a well-documented component hierarchy will help your team successfully manage and implement your web app.

• Break your mock-up into a component hierarchy.

• Build a static version of your app in React and publish it to the creative server.

• Document the minimal representation of state and in which component it will live. This is the hard part, follow the steps in Thinking in React (Links to an external site.) to help you through this process.

• List of team members and responsibilities.

The static app should be here . However, for some reason, the browser keeps giving back 404 and cannot load the web app. I am still working on fixing this issue. The source code I have finished right now is here.

Above is the mock-up I make up for milestone1. Was not really sure about how it should look like and what should be included on the main page.

But after further learning about React-bootstrap and React-router, I think I can put the firestone login in feathers into the navigation bar. And remain the main page with the rest of the main bookkeeping functions.

1. This is the navigation bar component and will be the parent component and holding the login/sign-up page.

2. This login state part I think will be the child component of the navigation bar. I think I still need a context component working with this component to check the login state and share the state to global.

3. This is a component for reading and calculating the data getting from the firebase database. Just for the result shows.

4. This is a component for getting the user input and will be the parent of component 5. (feels really similar to what we do in Lab7) I wonder if I should put the communication part with the database into another component, still need more researches.

5. This is a child component of 4. Reading back from the database and just showing the records.

The login in states will live in the component of LoginScreen.js which is the child of the navigation bar component. The state of the data change I think I will hold them in component 5 which will read the data back from the server. And update them synchronized with component 3.

Right now I only have these ideas about how should I hold my states. I do need more time to work on this project and think deeper.

I am the only member of the group and I will take all the responsibilities.

Project 2 milestone 4 12/13/2021

Project/class reflection: Reflect on your process both from the creative side as well as from the tactical side for this project or for the class as a whole. What went well? What didn't go so well? What would you do differently next time?

Honestly speaking, I only can say my creative side of Project 2 is combining firestore with the React. I do feel firebase is a pretty handy framework working with React app. The functions I used in this project are very efficient and easy to use. For me the most hard part in my project is identify different logined in user and show the correct data belongs to this user. I learned to use the contex feature to handle this problem. Add setting page for users to change the login email and avatar was also on the plan, but beacue the firestore cannot store images in the data base, I still cannot figure out a suitable way to make this happen. I think I will try another direction like just store the images locally to do this next time.

I really like the weather app showed in-class. The animation style is so cute and added a lot of stylish to the app. Below, the related outfit suggestions also very eye-catching. I love this idea so much. Just hope the weather API could work better in the future.