Lab 8: Designing a website of your choice – Part 2

GOALS
The goal of Laboratories 8 and 9 is to implement the site you designed at Lab 7, using React and
React Native technologies. React is a JavaScript framework in demand in the industry, and it will
be helpful to learn. React Native, which requests the knowledge of React, allows the development
of mobile applications.
Learning these technologies is not trivial and requires an investment of time. So, I give you 2
options for completing Labs 8 and 9 depending on your level of knowledge of JavaScript and React.
Your two options are:
1. Make a web application with the React framework (level 1)
2. Make a mobile application with the React Native framework (Level 2 - you already know
React)
Whichever option you choose, your final application (web or mobile) will need to:
• Reflect your Lab 7 design.
• Be in tune with usability heuristics, as your final application (Lab 9) will be evaluated
by heuristic evaluation.
• Be an interactive prototype, i.e., your application must show all the UI and be functional, but
without connecting to a back-end (you can use fake data).
• Integrating elements of internationalization.
This final application will have to be submitted to Lab 9. For this lab 8, you will need to submit a
video demonstrating your progress (see Programming section).
SUBMISSION DEADLINE
● Wednesday, March 31st, 2021, 11:30 p.m.
SEG3125 Analysis and
Design of User Interfaces Lab 8: Designing a website of
your choice – Part 2
SUBMISSION METHOD
• In Brightspace, the Lab 8 module contains a link to your submission.
• Submit a link to a video showing what you have accomplished so far (screenshot and voice
description).
• Be precise and concise. Your video should not last more than ten minutes.
• In your video:
1. Mention why you chose the web app or mobile app.
2. Mention what you are doing to learn React/React Native (maybe you are using the
suggested NetNinja videos or whatever).
3. Mention the changes to your Lab 7 design.
4. Show the connections between your Lab 7 interactive processes and the
React/Native components you’ve started.
5. Show how the components you have created so far work.
INSTRUCTIONS / TUTORIALS TO FOLLOW
Here's what I suggest for your learning:
Learning to React:
• Listen to Net Ninja Videos 1 to 24: Complete React and Redux Introduction
• The app (todo list) at the end of the 24 videos will show you that you can now make your site.
Bootstrap integration with React:
• To make it easier to lay your site, you can integrate bootstrap in React. Look here for
integration: https://react-bootstrap.github.io/getting-started/introduction/
• In Net Ninja videos, the author instead uses Materialize to help "styling". You can do the
same thing as him at first, to follow him, but later, when you're comfortable, you can go back
to Bootstrap that you already know.
Learning React Native (if you do Option 2)
• Listen to Net Ninja: React Native Tutorial videos. You will see that the first video mentions
that this series on React Native is aimed at people already familiar with React.
Design
As this is an implementation lab, your design has already been done at Lab 7.
But... as we all know, sometimes when we start implementing, we can also make some changes to our
design. So, feel free to make those changes that you find necessary. You can explain these changes in
your video.
Also, I'm aware that if you choose option 1 (web app), you won't implement a mobile app. But... I think
the course is already busy and it's enough to ask you to make a good web application.
Nevertheless, I advise you to think of your web application as if it were accessed using a phone. Do
not hesitate to adapt the design of your site designed to Lab 7 so that it is "mobile first". The reality
today is that most websites are accessed by mobile phones mainly.
Once you've got the knowledge of React, it'll be easier for you to go to React Native if you want, so
after the end of the session, If your design is already suitable for Mobile, it will be even easier.
STARTING POINT
Since your projects are all different, I cannot really provide a starting code that would help you all.
Nevertheless, if you follow the videos of the Net Ninja course, you will see that the author gives a
link to his GitHub directory for almost every video. For example, the code for his videos 23 and 24,
the culmination of your learning to a TODO list, is in the directory:
https://github.com/iamshaunjp/react-redux-complete-playlist/tree/lesson-23/todoapp.
Even though 24 videos may seem like a long time... I cannot recommend them enough! The videos are
between 5 and 10 minutes, so that's about a 3-hour tutorial. And with those 3 hours, you will already
have a little code that you will understand and that will serve as a starting point.
Programming
Requirements for Lab 8:
• Your programming must be done with React or React Native.
• Your app must conform to your Lab 7 design. If you make changes, you can
mention these changes in your video.
• Focus on the 3 processes you've put into your design (Lab 7) and think about your
application in terms of the React components that will be associated with these processes.
• Start implementing the planned components in the previous step.
• Show a minimally functional site.
In order not to have any surprises, I also give you the requirements of Lab 9 for next week:
Requirements for Lab 9:
• Complete the implementation of your website in React or React Native application.
• Incorporate Bootstrap (or other libraries if you prefer) to make your site not only functional
but also pretty and inviting!
• Make sure your app is in tune with usability heuristics, as your application will also be
evaluated by heuristic evaluation.
• Add an Internationalization component to your site (to be defined next week)
EVALUATION
● This lab is worth 3.5%
● You will be evaluated on your video description that will demonstrate your learning of React
(or React Native) and the start of you web app (or mobile app). But beware... you can't say
that "everything is coming", you have to do some of the implementation as mentioned in
the requirements (see programming section)
● Any delay, beyond the deadline, will have a penalty of 10% per day of delay, up to 2 days.
Questions
● You can ask your questions during the lab session on Wednesday, March 17th.
● You can also send your questions to your TA Farouk (bfarouk@uottawa.ca)