Web Front-End Development Project1 Journal

This is the work-in-progress journal for Web Front-End Development project 1. 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 1 works.

Project 1 milestone 1 9/30/2021

• Description of my project

  • the topic and message I'll be communicating

  • my inspiration and goal

  • the intended audience

• A wireframe that shows the design and flow of my site. This could be a sample mockup or hand-drawn sketch. I will include multiple designs if I haven't yet decided.

• What libraries or APIs I'm considering using

  • include the research I've done in this area

• Content or sources needed for my project

My grandmother got Alzheimer's disease one year ago. After watching the movie: THE FATHER, I realize the pain she may suffer as long as the deterioration of this disease. I am trying to create a website that can help people do some memory practice. The basic sketch is shown below.

The word will be shown in the text field with limited time, and the user should try to recall the word and give the correct answer. My target audiences are normal people who do not understand Alzheimer's very much, letting people experience a feeling of forgetting little moments.

I want to use React.js as my library to create suitable UIs. I think the declarative views make my code more predictable and easier to debug. I will also try to consider using APIs about random words generator to make sure the words are shown not duplicated.

I need more researches about React.js and find a useable words database for further development.

Project 1 milestone 2 10/7/2021

• Description of the minimum viable product (MVP) for my site

  • the minimal features and scope of my site needed to meet the goal of the site for my target users

• Document the process so far including iterations of my visual design and interactivity, problems or roadblocks you encountered, and how I resolved them (or not).

First I want to briefly introduce my topic Alzheimer's disease. Give a little talk about my experience of my grandmother getting Alzheimer's. The feeling of slowly forgetting everyone, everything, and how hard she was trying to think, to memorize, to recall what was there in her mind but all failed in the end.

The first two pages are the background of my topic. I want the audience to know why I choose this topic and how I want people to try it. The visual design will go from light grey background to dark grey through the pages. For me, this is more like the symbolic flow of people fading into the dark abyss of losing memory.

This is the UI interface I currently just have a very early stage mockup. I would like to do more in CSS to make sure the design theme keep the same as the pages before.

The numbers will show in red in the middle for seconds and the visitor will need to re-type the number after it disappears. 3 changes of error, and each error will pop out a message notifying the visitor. After 3 times the game will be over.

I think the createElement function in React.js can help a lot doing these interactive scenes, I can easily modify what I want to show and give feedback based on the reaction.

One thing I do consider a lot is if I need jQuery to help me make the number generator better and easier. But I do really need more studies and researches about how to use jQuery and this is my roadblock right now.

The minimum viable product I want to deliver is a 5-levels of difficulties number memorize game. I do want to keep my visual in a fluent flow with good interaction flow.

Project1 Milestone 4 10/28/2021

Journal project reflection

• Reflect on the process you used for this project

  • creative approach

  • tactical approach

  • time allotment

• What went well? What didn't go so well?

• What would you change in terms of your process for future projects?

I think on the creative approach I did well. I really like my idea of how to mimic a scenario that will push people to experience forgetting something. Even this is a little different from what real Alzheimer's is like, but at that moment, the audience cannot recall what they just seen is still strong to feel.

The tactical approach can be improved a lot in future projects. First of all, I should fully understand my requests. Then choosing suitable libraries or APIs to build this project. In this project, I think it is OK for me to choose React just as a library but obviously not the best way to do this. I think to do further researches around the topic I choose and the effects I want to make needs to take more time before really starting the project.

I feel the time is still very tight during this project. If I could have more time polishing my project, I think the outcome would look better. Basically, this is still caused by not getting very familiar with libraries I want to use, and learning to use them really spend a lot of time of mine. I think this situation would get better as long as I have more experience working with different APIs or libraries.