Description
Objective: Create a SPA app that enables the user to:
1. Update and add information on the view
2. Login with authentication
3. Fill in a form to post data with validation
4. View app on multiple devicesRequirements: 1. React JS.
2. Express, MongoDB and Mongoose.
3. SASS or LESS.
4. Secured with SSL.
5. Implement signup, login, logout with Authentication & Authorization.
6. Session & Cookies.
7. PWA.
8. Push project to GitHub
9. Present project on a live server.Technologies:ReactJS, CSS3, SASS/LESS, Json/Ajax, Bootstrap 4/5, SSL,
Authentication/Authorization, Session & Cookies, PWA, GitHub
Unformatted Attachment Preview
PROJECT 3
Task 1 & 2
1
Project 3 Overview
●
●
●
●
●
Project 3 begins today. Download the project pdf file from GAP Week 2 Day 3 if you
have not already done so.
In the pdf, there are information about the project’s specifics and requirements.
It will be a SPA project focusing on full-stack implementation.
The application should be build with both front-end and back-end technologies with
interactive features. The focus here is React JS as front-end and MongoDB/Express as
back-end.
You will start with Task 1 and 2 of this project. Put this together in a single Powerpoint
presentation.
2
Project 3
Task 1
3
Project 3 – Task 1
●
●
Write a proposal on this project using powerpoint.
Your proposal should include:
○
○
Cover slide with your name, course title, project title
Proposal slides:
■
Introduction
■
Goals and objectives
■
Target audience
■
Key features
■
Technology requirements
4
Project 3 – Task 1
○
Introduction
Briefly give an introduction to the client and the project
○
Goals and objectives
What is the goal/objective of this project? To solve existing problems the client is currently facing? To add
new features to the existing app? The client wants a new app to help market tits business? To provide
improved and modern online experiences for its customers?
○
Target audience
Briefly identify who the core users of the app are? You can break it down to age, gender, occupation, income
level, geographical location, etc
○
Key features
List the key features the app will have.
○
Technology requirements
Briefly list the technologies that will be used to build this app.
5
Project 3
Task 2
6
Project 3 – Task 2
●
●
●
For task 2, you will create wireframes. Implement your wireframes on the same
Powerpoint you started in Task 1.
Let’s discuss again what wireframes are. Wireframes show the layout styles of a web
page. Layout styles here actually doesn’t concern with how web pages look ie. how
pleasant or visually attractive they appear.
Wireframes layout styles concern more with page elements – navigation, content
organization, site tools and information design. The focus primarily is on how well
these elements come together that make sense to the users, what’s familiar and
available so that it is easy for them to navigate around and complete their task in the
quickest possible time.
7
Project 3 – Task 2
• There are many layout styles out there that one can look at. Each style is designed to suit the
type of content to be presented on the page. And each style’s content is also varied depending
on the needs of the client’s users.
• For example, some sites have advertisements or promotional banners whereas some don’t. And
some have hidden menus (dropdown menus) and some prefer to use the side bar navigation for
sub categories. Whatever style one chooses, always keep the users in mind and best if supported
with research and customer surveys or feedback.
Project 3 – Task 2
• Although wireframes differ from site to site, the following elements often are included as
standard elements on wireframes:
• Logo
• Search field
• Breadcrumb
• Headers, including page title as the H1 and subheads H2-Hx
• Navigation systems, including global navigation and local navigation
• Body content
• Share buttons
• Contact information
• Footer
Project 3 – Task 2
• But first, let’s get familiar with some common wireframe symbols. Keep in mind, there are
variations out there, as you will see in some examples later.
Project 3 – Task 2
• On the next slide I have some page layout examples that we can explore. On first impression, you
might wonder why they look so basic, no colors or graphics. This type of layout is what
information architect and UX designers call “wireframes”.
• They are basic because they serve as the very early stage of layout sketching, brainstorming and
discussion. There’s also another purpose – to focus on layout of content, site interactions and
way finding of information, page by page without the distractions of colors, graphics and
designs.
Project 3 – Task 2 (Wireframe Examples)
Project 3 – Task 2 (Wireframe Examples)
Project 3 – Task 2 (Wireframe Examples)
Project 3 – Task 2 (Wireframe Examples)
Project 3 – Task 2 (Wireframe Examples)
Project 3 – Task 2 (Wireframe Examples)
Project 3 – Task 2
• Here’s a breakdown of the common elements you saw that was used to represent each type of
content:
• Box with “X” – graphics and imageries including logo and background designs
• Box – type of content with labels (header, footer, ads, etc)
• Navigation – use actual navigation labels (home, about, etc)
• Lorem Ipsum – as body copy/placeholder texts. (go to http://lipsum.com to generate & copy text)
• Others – search boxes, video/audio component/player, navigation arrows (buttons – use rectangle
box), colors – use black, white, gray only.
Project 3 – Task 2
• Creating Wireframes
• It’s important to keep in mind that wireframes are guides to where the major navigation and
content elements of your site are going to appear on the page. Since the goal of the illustrations is
not to depict visual design, keep it simple.
• Do not use colors. If you would typically use color to distinguish items, instead rely on various gray
tones to communicate the differences.
• Do not use images. Images distract from the task at hand. To indicate where you intend to place
an image and its size, you can instead use a rectangular box sized to dimension with an “x” through
it.
• Use only one generic font. Typography should not be a part of the wireframing discussion. Within
the wireframes, however, you may still resize the font to indicate various headers and changes in
the hierarchy of the text information on the page.
Project 3 – Task 2
• You can create wireframes using one of these tools:
• Wireframe.cc (https://wireframe.cc/)
• Moqups.com (https://moqups.com/)
• Marvelapp.com (https://marvelapp.com/features/wireframing)
• Axure.com (http://www.axure.com/)
• Proto.io (https://proto.io/)
• Adobe XD (https://www.adobe.com/products/xd.html)
• 20 Best Wireframe Tools
(http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302)
• Free Bootstrap Wireframing Set for Powerpoint
(https://onextrapixel.com/free-bootstrap-wireframing-set-for-powerpoint/)
Project 3 – Task 2
• Your Job:
• Create wireframes for at least 3 screens for your app/site.
• Choose screens that have the most impact and importance to your users.
• One of the them must be the home screen.
• Create your screens using the symbols as you had just learned about.
• Use the examples as shown on previous slides for guidance.
• Save/export all wireframes as PNG or JPG format. Insert them into your powerpoint
presentation.
• When finished both tasks, export the powerpoint presentation as a single pdf file.
Project 3
Task 1 & 2
Submission
22
Project 3 – Task 1 & 2
DUE
On or before Sunday Week 4, 10.30PM PT.
SUBMISSION
Single PDF presentation in Project 3 Task 1 & 2 Dropbox on GAP Week 4 Day 3.
Questions?
PROJECT 3
Objective
Create a SPA app that enables the user to:
1. Update and add information on the view
2. Login with authentication
3. Fill in a form to post data with validation
4. View app on multiple devices
Requirements
1. React JS.
2. Express, MongoDB and Mongoose.
3. SASS or LESS.
4. Secured with SSL.
5. Implement signup, login, logout with Authentication & Authorization.
6. Session & Cookies.
7. PWA.
8. Push project to GitHub
9. Present project on a live server.
Technologies
ReactJS, CSS3, SASS/LESS, Json/Ajax, Bootstrap 4/5, SSL,
Authentication/Authorization, Session & Cookies, PWA, GitHub
Submission
Post:
1. URL of GitHub
2. URL of project on a live server
in the Dropbox on Module 6 in GAP.
Due
At the end of Module 6 Week 8 Day 3
Purchase answer to see full
attachment
