Challenge Overview
Welcome to Hubs - Responsive Engagement Site ReactJS UI Prototype Challenge
The goal of this challenge is to create the ReactJS Prototype for an application using the provided "Hubs – Responsive Engagement Site" storyboards. The ReactJS Prototype must follow our standards and our guidelines.
As part of this challenge you will need to comments ReactJS JavaScript/CSS/etc code. We need clear explanation of the code to help us figure all the ReactJS JavaScript/CSS/other code functions and make it easier for future developers and the client to understand what you have built.
Storyboard.zip - Storyboard Design
General Tasks
- Convert provided Storyboard Design into ReactJS UI Prototype with best practice solution.
- You can use this ReactJS boilerplate v.3.4.0 for this challenge as base of ReactJS Application https://github.com/react-boilerplate/react-boilerplate
- Or you can come up with your own ReactJS starting code as long its contains these features:
-- Redux
-- React Routing
-- SEO
-- ES6 Syntax
-- Linter
-- Server for Development & Production
-- Components Unit Testing
-- Able to Deploy to Heroku
- Some Framework option that can be used for this challenge:
http://react.semantic-ui.com/introduction
http://www.material-ui.com/#/
- Make sure you follow all element styling based on storyboard
- Create simple animation/transition/effect that can make the prototype fun to use!
- Use SCSS/SASS for CSS Pre-Processor.
- Use flexbox to build layout grid, you can use this React version
- ReactJS Components must re-usable!
- Data for each pages as possible need loaded from JSON files.
- Create ReactJS Services to pull all data from JSON
- Create Routes/Path that use proper naming with existing pages
- Put clear comment for all ReactJS elements.
- Use font-face for this prototype submission. You can download the fonts from here:
Roboto: https://www.fontsquirrel.com/fonts/roboto
Playfair display: https://www.fontsquirrel.com/fonts/playfair-display
Quicksand: https://www.fontsquirrel.com/fonts/quicksand
- Please check Desktop and Mobile Storyboard flow to make you understand the application flow:
Desktop Version: https://marvelapp.com/1ja8h22
Mobile Version: https://marvelapp.com/3jf1j21
Responsive requirements:
Desktop layout
- Provided storyboard using 1366px.
- All section background need covered browser screen, while the main content area centered.
Tablet layout
- Use fluid version of mobile layout.
Mobile layout
- Provided storyboard using Retina size.
- All sections need use fluid width that covered mobile screen
- Make sure storyboard look good on Standard size as well
Let’s discuss if you have some suggestions!
PAGE REQUIREMENTS
1). Landing Page
DESKTOP VERSION
Screenshot: 01-Landing.png
- This is landing page look and feel
- Read general layout that will can be build as component so they to be re-used for another pages below:
Header
- Background need to be fluid, while the content remain centered.
- Hamburger menu placed on the left side
- Click Hamburger menu will slide the left sidebar while dimming the main page (Screenshot: 03-Menu.png)
- Green Background Pattern needs to cover two thirds of the screen
- Each menu needs to take user to correct page
- Click x button to close/slide the sidebar
- HUBS Logo need take user to homepage
- Search and Login button placed on the right side
- Login button prompts the user to login with social media (there’ll be other social media accounts for which we will add later, so consider saving space or using small icons), site native accounts, and offer the ability to sign-up.
Banner
- Background needs to be fluid, while the content remain centered.
- There are 3 buttons on the left side of banner
-- I want to learn
-- I want to teach
-- I want to give (Ignore storyboard)
- Match the color style
Not sure where to start
- Yellow underline meaning for clickable link
- Think about fun effect for underline text
Recent Project
- Go to Catalog (update text to just “Catalog >>”) link placed on the right side that will take user to Catalog screen
- All boxes need equal height
- There’s a label icon on the top right of each box
- Click on project photo or name to take user to Project Detail page
Event
- Event list placed on the left side scrollable up to 10 items
- Load more events (update text to just “More Events”) will redirect to a dedicated calendar page
- Place calendar on the right side of event
- Suggest us the best Calendar plugin for ReactJS
- Make sure user can navigate between months and years
- There are some icons/marking placed on calendar day to indicate there’s event on that day
- The floating girl icon placed on the bottom right side of calendar. Clicking on the icon will load the Help tooltips (Screenshot: 02-Help-clicked.png)
Want to Keep Learning?
- Text Input and Dropdown placed for this section
- Subscribe button can be dead link
Companies that support us
- Put link placeholder for each logo boxes
Footer
- Email and Call Us need clickable and show up the email and call format
- Social icons placed on the right side
- Copyright placed on the bottom of page
MOBILE VERSION
Screenshot: 01-Landing.png
Header
- Use same height for the header bar
- Hamburger menu remain placed on the left
- Use same HUBS logo for the mobile version
- HUBS logo need to centered for mobile
- Use same styling for Login button
- Hide search button for mobile
- For mobile, click the hamburger menu need load sidebar from top (Screenshot: 02-Menu.png) will also neeed dim the page screen
Banner
- Background need to be fluid, while the content remain centered.
- There are 3 buttons on the center of banner
-- I want to learn
-- I want to teach
-- I want to give (Ignore storyboard)
- Match the color style
Not sure where to start
- Make sure the text moving down as device width
Recent Projects
- Displays two adjacent boxes, and allow swiping from left to right (fluid or page-like are both okay)
Events
- Hide Event list for mobile layout
- Clicking on an event will pop out its information either in speech bubble form or in front of the calendar.
- You can re-use Modal Window styling from Advanced search (09-Advanced-search.png)
- Content need filled with event list from desktop layout
- Floating Girl icon need remain placed on the bottom left of calendar
- Need the calendar to be fluid as browser screen
Want to keep Learning
- Text Input and Dropdown displayed on separate line
- Make the labels centered
- Subscribe button need to be centered
Companies that support us
- Displays logo boxes
- Make logo box stacked for mobile
Footer
- All content need to be centered for mobile
2). About Us
DESKTOP VERSION
Screenshot: 04-About-us.png
Who is hubs
- Display title on the left and content right side
How does Hubs work
- Make sure each block in separate column
- Put title below the block
- There are arrow between block
Companies that support us
- You can re-use same component like on homepage with different styling for this page
MOBILE VERSION
Screenshot: 03-About-us.png
Who is hubs
- Title need to be centered
- Content need remain use left alignment but need to be fluid
How does Hubs work
- Each block displayed on separate line
- Arrow between block need to be hidden
Companies that support us
- You can re-use same component like on homepage with different styling for this page
3). Learning Center
DESKTOP VERSION
Screenshot: 05-Learning-center.png
Header
- For this landing center page you need displayed logged in state for user
- Add Learning Center text next to HUBS logo
- On the right side of header bar add Notification icon, Scores & User Profile information.
- Click User Profile need take user to Profile page
Search
- Only two boxes are necessary for your prototype one for text search and the other a dropdown menu for All Categories
- Search button need take user to search result screen
Categories
- All boxes need use equal height
- Notice there’s tag for some boxes
- Whole box need take user to Category detail screen
MOBILE VERSION
Screenshot: 04-Learning-center.png
Header
- Add Learning Center text next to HUBS logo
- Just need displayed user photo for the mobile
- Click User Profile need take user to Profile page
Search
- For mobile display the fluid search only
- Search button need to be centered
Categories
- Use 2 columns layout for the categories
4). Category Detail
DESKTOP VERSION
Screenshot: 06-Category-selected.png
Banner
- Category Title need to be placed centered
- Make sure this component can be-reused on another page with different styling.
Project Grid
- Result information placed on the left side
- Sort By dropdown placed on the right side
- Load more project need load another row in page
- Click go to project need take user to Project Detail page
MOBILE VERSION
Screenshot: N/A
Banner
- Category Title need to be placed centered
Project Grid
- Result information & Sort By dropdown need placed on same line
- Use 2 columns layout for mobile
5). Search Result
DESKTOP VERSION
Screenshot: 07-Search-results.png
Banner
- Search Result information placed on top
- Category and Type need placed on separated line
- Make sure this component can be-reused on another page with different styling.
- Click go to project need take user to Project Detail page
Search Result Grid
- Result information placed on the left side
- Sort By dropdown placed on the right side
MOBILE VERSION
Screenshot: N/A
Banner
- Search Result information need to be placed centered
Project Grid
- Result information & Sort By dropdown need placed on same line
- Use 2 columns layout for mobile
- Click go to project need take user to Project Detail page
6). Project Detail
DESKTOP VERSION
Screenshot: 08-Lesson-profile.png
Banner
- Title need to be centered
- There’s a disable Finish Lesson button on the right side of title by default
- After video completed playing Finish Lesson button need to be active (Screenshot: 09-Finish-lesson.png)
Video
- Video needs to be playable
- Use a dummy video from Youtube
- You can ignore the video button design
- Progress displayed on the bottom
Instructions
- Instructions box placed on the left side
- Match css styling for the list
- On the right side, there’s box for What you’ll need and Really liked this topic?
- Match content like storyboard
- This lesson is sponsored need placed centered
MOBILE VERSION
Screenshot: N/A
Banner
- Title need to be centered for mobile
Video
- Video need to be centered
- Progress displayed on the bottom
Instructions
- Instructions box need use fluid width for mobile
- What you’ll need and Really liked this topic? Need moved in separated line.
- This lesson is sponsored need placed centered
7). Quiz
DESKTOP VERSION
Screenshot: 10-Quiz.png
Banner
- Title need to be centered
- Match content like storyboard
Radio Button Selections
- User can only select one of the available options
- Match radio button styling
- Next button placed on the bottom of screen
- Progress steps placed on the bottom
- After answering the final question, the system will verify if all answers were correct. If 100%, then goes to Reward Screen (Screenshot: 11-Finish-lesson-rewards.png), else restarts quiz.
- At the rewards screen
- Match content for each boxes
- X button closes the modal
- “Ok! Great!“ button take the user to Profile page
- This lesson is sponsored by will be placed centered
MOBILE VERSION
Screenshot: N/A
Banner
- Title needs to be centered
Radio Button Selections
- All radio button need to left alignment for mobile (one column, many rows)
- Next button remain centered
- Progress steps remain centered
- Reward screen for mobile, place that 3 boxes displayed vertically
8). Incubation Center (Admin)
Important: This page can be standalone!
DESKTOP VERSION
Screenshot: 12-Incubation-center-admin.png
Header
- Match the icon on the right side of banner
Banner
- Title and subtitle need placed centered
Student List
- Title and Sort By button need placed on top
- Filter box placed on the left side
- Search input placed on top
- Some checkboxes options on different group placed below it
- Apply Filters button placed on the bottom of boxes
Student Boxes Grid
- All boxes need use equal height
- Each boxes need consist of Image on top
- There’s score information on the right side of image
- Username need to clickable
- Member since information placed below the name
- View Profile and Notify Interest links placed on the bottom
- Load more companies need load another row
MOBILE VERSION
Screenshot: 05-Incubation-admin.png
Banner
- Title and subtitle need placed centered
Student List
- Search box need use full width for mobile
- Search input placed on top
- Title and Sort By button need placed on top
- Advanced search show up of mobile next to search button
- Click Advanced search need load the modal window for mobile (Screenshot: 09-Advanced-search.png)
- User need scroll to see all categories
- You can use default browser style for scrollbar
- Apply filter button placed on the bottom
- Click the x button need close the modal window
Student Boxes Grid
- Use 2 columns layout for the boxes
- Remain use same title for the Load more button
9). Incubation Center (Student)
DESKTOP VERSION
Screenshot: 13-Incubation-center-student.png
Banner
- Title and subtitle need placed centered
Companies List
- Title and Sort By button need placed on top
- Filter box placed on the left side
- Search input placed on top
- Some checkboxes options on different group placed below it
- Apply Filters button placed on the bottom of boxes
Campaign Boxes Grid
- All boxes need use equal height
- Each boxes need consist of Image on top
- There’s tag on the right side of image
- Campaign Title need to clickable
- Sponsored will be for client
- View Details and Notify Interest links placed on the bottom
- Load more companies need load another row
MOBILE VERSION
Screenshot: 06-Incubation-student.png
Banner
- Title and subtitle need placed centered
Companies List
- Search box need use full width for mobile
- Search input placed on top
- Advanced search show up of mobile next to search button
- Title and Sort By button need placed on top
Campaign Boxes Grid
- Use 2 columns layout for the boxes
- Remain use same title for the Load more button
10). Profile
DESKTOP VERSION
Screenshot: 14-Profile.png
Banner
- User Profile Thumbnail placed on the left side with rounded shape
- User information placed on the right side
- Points, Level and Medals placed below
- Match the different color styling
About Me
- My Bio contains text information
- My Interest will be list with icon
- This Month, contains of timeline
- Offer Scholarships button placed on the bottom
Scholarships
- This is contains box for scholarship
- Icon need placed centered
- View Assignments link placed on the bottom
Lesson Completed
- Show all lessons link placed on the right side
- Display 3 columns layout for boxes
Lesson You Might Like
- Display 3 columns layout for boxes
MOBILE VERSION
Screenshot: 07-Profile.png
Banner
- Banner need need to fill the device width for mobile
- Alignment remain the same like desktop version
About Me
- About Me content need fill device width for mobile
- My Interest, icon & list need displayed side by side
- This Month, contains of timeline remain like desktop look
Scholarships
- If only 1 box, need display on the left side
Lesson Completed
- Use 2 columns layout for mobile
Lesson You Might Like
- Use 2 columns layout for mobile
11). Experience Center
DESKTOP VERSION
Screenshot: 15-Experience-center.png
Banner
- Title placed centered
- 3 boxes for Lessons, Interactive and Museums placed centered
All Projects
- Title and Sort By button need placed on top
- Filter box placed on the left side
- Search input placed on top
- Some checkboxes options on different group placed below it
- Apply Filters button placed on the bottom of boxes
Projects Boxes Grid
- All boxes need use equal height
- Each boxes need consist of Image on top
- There’s icon on the right side of image
- Project Title need to clickable
- Go to Project take user to Detail page
- Load More Events button placed on the bottom
MOBILE VERSION
Screenshot: 08-Experience-center.png
Banner
- Title placed centered
- Search box show up below the title with Advanced search and Search
- 3 boxes for Lessons, Interactive and Museums need swipeable for mobile
All Projects
- Title and Sort By button need placed on top
Projects Boxes Grid
- Use 2 columns layout for mobile
- Use same title for mobile
13). Contact Us
DESKTOP VERSION
Screenshot: 16-Contact-us.png
- Contact Us information placed on top
- Contact Form display Email And Message
- Send message placed on the bottom
MOBILE VERSION
Screenshot: 10-Contact-us.png
- For mobile layout all contact layout need to be fluid as device width
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient ReactJS application that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Responsive Web Design solution!
CODE REQUIREMENTS:
ReactJS
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all ReactJS code so future developers can follow the code.
- All ReactJS code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Library
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements (Latest versions of)
- Chrome
- IE11
- Microsoft Edge
- Safari
- Firefox
- Safari & Chrome Mobile on iPhone
- Safari & Chrome Mobile on iPad
The goal of this challenge is to create the ReactJS Prototype for an application using the provided "Hubs – Responsive Engagement Site" storyboards. The ReactJS Prototype must follow our standards and our guidelines.
As part of this challenge you will need to comments ReactJS JavaScript/CSS/etc code. We need clear explanation of the code to help us figure all the ReactJS JavaScript/CSS/other code functions and make it easier for future developers and the client to understand what you have built.
Final Submission Guidelines
Challenge Downloadable Available on Challenge Forum:Storyboard.zip - Storyboard Design
General Tasks
- Convert provided Storyboard Design into ReactJS UI Prototype with best practice solution.
- You can use this ReactJS boilerplate v.3.4.0 for this challenge as base of ReactJS Application https://github.com/react-boilerplate/react-boilerplate
- Or you can come up with your own ReactJS starting code as long its contains these features:
-- Redux
-- React Routing
-- SEO
-- ES6 Syntax
-- Linter
-- Server for Development & Production
-- Components Unit Testing
-- Able to Deploy to Heroku
- Some Framework option that can be used for this challenge:
http://react.semantic-ui.com/introduction
http://www.material-ui.com/#/
- Make sure you follow all element styling based on storyboard
- Create simple animation/transition/effect that can make the prototype fun to use!
- Use SCSS/SASS for CSS Pre-Processor.
- Use flexbox to build layout grid, you can use this React version
- ReactJS Components must re-usable!
- Data for each pages as possible need loaded from JSON files.
- Create ReactJS Services to pull all data from JSON
- Create Routes/Path that use proper naming with existing pages
- Put clear comment for all ReactJS elements.
- Use font-face for this prototype submission. You can download the fonts from here:
Roboto: https://www.fontsquirrel.com/fonts/roboto
Playfair display: https://www.fontsquirrel.com/fonts/playfair-display
Quicksand: https://www.fontsquirrel.com/fonts/quicksand
- Please check Desktop and Mobile Storyboard flow to make you understand the application flow:
Desktop Version: https://marvelapp.com/1ja8h22
Mobile Version: https://marvelapp.com/3jf1j21
Responsive requirements:
Desktop layout
- Provided storyboard using 1366px.
- All section background need covered browser screen, while the main content area centered.
Tablet layout
- Use fluid version of mobile layout.
Mobile layout
- Provided storyboard using Retina size.
- All sections need use fluid width that covered mobile screen
- Make sure storyboard look good on Standard size as well
Let’s discuss if you have some suggestions!
PAGE REQUIREMENTS
1). Landing Page
DESKTOP VERSION
Screenshot: 01-Landing.png
- This is landing page look and feel
- Read general layout that will can be build as component so they to be re-used for another pages below:
Header
- Background need to be fluid, while the content remain centered.
- Hamburger menu placed on the left side
- Click Hamburger menu will slide the left sidebar while dimming the main page (Screenshot: 03-Menu.png)
- Green Background Pattern needs to cover two thirds of the screen
- Each menu needs to take user to correct page
- Click x button to close/slide the sidebar
- HUBS Logo need take user to homepage
- Search and Login button placed on the right side
- Login button prompts the user to login with social media (there’ll be other social media accounts for which we will add later, so consider saving space or using small icons), site native accounts, and offer the ability to sign-up.
Banner
- Background needs to be fluid, while the content remain centered.
- There are 3 buttons on the left side of banner
-- I want to learn
-- I want to teach
-- I want to give (Ignore storyboard)
- Match the color style
Not sure where to start
- Yellow underline meaning for clickable link
- Think about fun effect for underline text
Recent Project
- Go to Catalog (update text to just “Catalog >>”) link placed on the right side that will take user to Catalog screen
- All boxes need equal height
- There’s a label icon on the top right of each box
- Click on project photo or name to take user to Project Detail page
Event
- Event list placed on the left side scrollable up to 10 items
- Load more events (update text to just “More Events”) will redirect to a dedicated calendar page
- Place calendar on the right side of event
- Suggest us the best Calendar plugin for ReactJS
- Make sure user can navigate between months and years
- There are some icons/marking placed on calendar day to indicate there’s event on that day
- The floating girl icon placed on the bottom right side of calendar. Clicking on the icon will load the Help tooltips (Screenshot: 02-Help-clicked.png)
Want to Keep Learning?
- Text Input and Dropdown placed for this section
- Subscribe button can be dead link
Companies that support us
- Put link placeholder for each logo boxes
Footer
- Email and Call Us need clickable and show up the email and call format
- Social icons placed on the right side
- Copyright placed on the bottom of page
MOBILE VERSION
Screenshot: 01-Landing.png
Header
- Use same height for the header bar
- Hamburger menu remain placed on the left
- Use same HUBS logo for the mobile version
- HUBS logo need to centered for mobile
- Use same styling for Login button
- Hide search button for mobile
- For mobile, click the hamburger menu need load sidebar from top (Screenshot: 02-Menu.png) will also neeed dim the page screen
Banner
- Background need to be fluid, while the content remain centered.
- There are 3 buttons on the center of banner
-- I want to learn
-- I want to teach
-- I want to give (Ignore storyboard)
- Match the color style
Not sure where to start
- Make sure the text moving down as device width
Recent Projects
- Displays two adjacent boxes, and allow swiping from left to right (fluid or page-like are both okay)
Events
- Hide Event list for mobile layout
- Clicking on an event will pop out its information either in speech bubble form or in front of the calendar.
- You can re-use Modal Window styling from Advanced search (09-Advanced-search.png)
- Content need filled with event list from desktop layout
- Floating Girl icon need remain placed on the bottom left of calendar
- Need the calendar to be fluid as browser screen
Want to keep Learning
- Text Input and Dropdown displayed on separate line
- Make the labels centered
- Subscribe button need to be centered
Companies that support us
- Displays logo boxes
- Make logo box stacked for mobile
Footer
- All content need to be centered for mobile
2). About Us
DESKTOP VERSION
Screenshot: 04-About-us.png
Who is hubs
- Display title on the left and content right side
How does Hubs work
- Make sure each block in separate column
- Put title below the block
- There are arrow between block
Companies that support us
- You can re-use same component like on homepage with different styling for this page
MOBILE VERSION
Screenshot: 03-About-us.png
Who is hubs
- Title need to be centered
- Content need remain use left alignment but need to be fluid
How does Hubs work
- Each block displayed on separate line
- Arrow between block need to be hidden
Companies that support us
- You can re-use same component like on homepage with different styling for this page
3). Learning Center
DESKTOP VERSION
Screenshot: 05-Learning-center.png
Header
- For this landing center page you need displayed logged in state for user
- Add Learning Center text next to HUBS logo
- On the right side of header bar add Notification icon, Scores & User Profile information.
- Click User Profile need take user to Profile page
Search
- Only two boxes are necessary for your prototype one for text search and the other a dropdown menu for All Categories
- Search button need take user to search result screen
Categories
- All boxes need use equal height
- Notice there’s tag for some boxes
- Whole box need take user to Category detail screen
MOBILE VERSION
Screenshot: 04-Learning-center.png
Header
- Add Learning Center text next to HUBS logo
- Just need displayed user photo for the mobile
- Click User Profile need take user to Profile page
Search
- For mobile display the fluid search only
- Search button need to be centered
Categories
- Use 2 columns layout for the categories
4). Category Detail
DESKTOP VERSION
Screenshot: 06-Category-selected.png
Banner
- Category Title need to be placed centered
- Make sure this component can be-reused on another page with different styling.
Project Grid
- Result information placed on the left side
- Sort By dropdown placed on the right side
- Load more project need load another row in page
- Click go to project need take user to Project Detail page
MOBILE VERSION
Screenshot: N/A
Banner
- Category Title need to be placed centered
Project Grid
- Result information & Sort By dropdown need placed on same line
- Use 2 columns layout for mobile
5). Search Result
DESKTOP VERSION
Screenshot: 07-Search-results.png
Banner
- Search Result information placed on top
- Category and Type need placed on separated line
- Make sure this component can be-reused on another page with different styling.
- Click go to project need take user to Project Detail page
Search Result Grid
- Result information placed on the left side
- Sort By dropdown placed on the right side
MOBILE VERSION
Screenshot: N/A
Banner
- Search Result information need to be placed centered
Project Grid
- Result information & Sort By dropdown need placed on same line
- Use 2 columns layout for mobile
- Click go to project need take user to Project Detail page
6). Project Detail
DESKTOP VERSION
Screenshot: 08-Lesson-profile.png
Banner
- Title need to be centered
- There’s a disable Finish Lesson button on the right side of title by default
- After video completed playing Finish Lesson button need to be active (Screenshot: 09-Finish-lesson.png)
Video
- Video needs to be playable
- Use a dummy video from Youtube
- You can ignore the video button design
- Progress displayed on the bottom
Instructions
- Instructions box placed on the left side
- Match css styling for the list
- On the right side, there’s box for What you’ll need and Really liked this topic?
- Match content like storyboard
- This lesson is sponsored need placed centered
MOBILE VERSION
Screenshot: N/A
Banner
- Title need to be centered for mobile
Video
- Video need to be centered
- Progress displayed on the bottom
Instructions
- Instructions box need use fluid width for mobile
- What you’ll need and Really liked this topic? Need moved in separated line.
- This lesson is sponsored need placed centered
7). Quiz
DESKTOP VERSION
Screenshot: 10-Quiz.png
Banner
- Title need to be centered
- Match content like storyboard
Radio Button Selections
- User can only select one of the available options
- Match radio button styling
- Next button placed on the bottom of screen
- Progress steps placed on the bottom
- After answering the final question, the system will verify if all answers were correct. If 100%, then goes to Reward Screen (Screenshot: 11-Finish-lesson-rewards.png), else restarts quiz.
- At the rewards screen
- Match content for each boxes
- X button closes the modal
- “Ok! Great!“ button take the user to Profile page
- This lesson is sponsored by will be placed centered
MOBILE VERSION
Screenshot: N/A
Banner
- Title needs to be centered
Radio Button Selections
- All radio button need to left alignment for mobile (one column, many rows)
- Next button remain centered
- Progress steps remain centered
- Reward screen for mobile, place that 3 boxes displayed vertically
8). Incubation Center (Admin)
Important: This page can be standalone!
DESKTOP VERSION
Screenshot: 12-Incubation-center-admin.png
Header
- Match the icon on the right side of banner
Banner
- Title and subtitle need placed centered
Student List
- Title and Sort By button need placed on top
- Filter box placed on the left side
- Search input placed on top
- Some checkboxes options on different group placed below it
- Apply Filters button placed on the bottom of boxes
Student Boxes Grid
- All boxes need use equal height
- Each boxes need consist of Image on top
- There’s score information on the right side of image
- Username need to clickable
- Member since information placed below the name
- View Profile and Notify Interest links placed on the bottom
- Load more companies need load another row
MOBILE VERSION
Screenshot: 05-Incubation-admin.png
Banner
- Title and subtitle need placed centered
Student List
- Search box need use full width for mobile
- Search input placed on top
- Title and Sort By button need placed on top
- Advanced search show up of mobile next to search button
- Click Advanced search need load the modal window for mobile (Screenshot: 09-Advanced-search.png)
- User need scroll to see all categories
- You can use default browser style for scrollbar
- Apply filter button placed on the bottom
- Click the x button need close the modal window
Student Boxes Grid
- Use 2 columns layout for the boxes
- Remain use same title for the Load more button
9). Incubation Center (Student)
DESKTOP VERSION
Screenshot: 13-Incubation-center-student.png
Banner
- Title and subtitle need placed centered
Companies List
- Title and Sort By button need placed on top
- Filter box placed on the left side
- Search input placed on top
- Some checkboxes options on different group placed below it
- Apply Filters button placed on the bottom of boxes
Campaign Boxes Grid
- All boxes need use equal height
- Each boxes need consist of Image on top
- There’s tag on the right side of image
- Campaign Title need to clickable
- Sponsored will be for client
- View Details and Notify Interest links placed on the bottom
- Load more companies need load another row
MOBILE VERSION
Screenshot: 06-Incubation-student.png
Banner
- Title and subtitle need placed centered
Companies List
- Search box need use full width for mobile
- Search input placed on top
- Advanced search show up of mobile next to search button
- Title and Sort By button need placed on top
Campaign Boxes Grid
- Use 2 columns layout for the boxes
- Remain use same title for the Load more button
10). Profile
DESKTOP VERSION
Screenshot: 14-Profile.png
Banner
- User Profile Thumbnail placed on the left side with rounded shape
- User information placed on the right side
- Points, Level and Medals placed below
- Match the different color styling
About Me
- My Bio contains text information
- My Interest will be list with icon
- This Month, contains of timeline
- Offer Scholarships button placed on the bottom
Scholarships
- This is contains box for scholarship
- Icon need placed centered
- View Assignments link placed on the bottom
Lesson Completed
- Show all lessons link placed on the right side
- Display 3 columns layout for boxes
Lesson You Might Like
- Display 3 columns layout for boxes
MOBILE VERSION
Screenshot: 07-Profile.png
Banner
- Banner need need to fill the device width for mobile
- Alignment remain the same like desktop version
About Me
- About Me content need fill device width for mobile
- My Interest, icon & list need displayed side by side
- This Month, contains of timeline remain like desktop look
Scholarships
- If only 1 box, need display on the left side
Lesson Completed
- Use 2 columns layout for mobile
Lesson You Might Like
- Use 2 columns layout for mobile
11). Experience Center
DESKTOP VERSION
Screenshot: 15-Experience-center.png
Banner
- Title placed centered
- 3 boxes for Lessons, Interactive and Museums placed centered
All Projects
- Title and Sort By button need placed on top
- Filter box placed on the left side
- Search input placed on top
- Some checkboxes options on different group placed below it
- Apply Filters button placed on the bottom of boxes
Projects Boxes Grid
- All boxes need use equal height
- Each boxes need consist of Image on top
- There’s icon on the right side of image
- Project Title need to clickable
- Go to Project take user to Detail page
- Load More Events button placed on the bottom
MOBILE VERSION
Screenshot: 08-Experience-center.png
Banner
- Title placed centered
- Search box show up below the title with Advanced search and Search
- 3 boxes for Lessons, Interactive and Museums need swipeable for mobile
All Projects
- Title and Sort By button need placed on top
Projects Boxes Grid
- Use 2 columns layout for mobile
- Use same title for mobile
13). Contact Us
DESKTOP VERSION
Screenshot: 16-Contact-us.png
- Contact Us information placed on top
- Contact Form display Email And Message
- Send message placed on the bottom
MOBILE VERSION
Screenshot: 10-Contact-us.png
- For mobile layout all contact layout need to be fluid as device width
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient ReactJS application that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Responsive Web Design solution!
CODE REQUIREMENTS:
ReactJS
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all ReactJS code so future developers can follow the code.
- All ReactJS code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Library
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements (Latest versions of)
- Chrome
- IE11
- Microsoft Edge
- Safari
- Firefox
- Safari & Chrome Mobile on iPhone
- Safari & Chrome Mobile on iPad