Challenge Overview
Welcome to GE Brilliant Career Setup Web Server contest. As part of this contest, you will set up a web application server with a server side templating engine.
Project Overview
GE Brilliant Career Labs wants to build a website to help students navigate their way into a STEM career using multiple resources aggregated into one simple, information site. The first phase will build out the initial website, allowing students to register, gather information and fill out modules to help them develop their soft skills.
Contest Overview
We initially ran a contest to implement a UI Prototype in Angularjs. However, we realized that most of the data in our application is static in nature. While we will need to store and fetch the data from the database and external APIs, the data itself displayed is read only and the user rarely has any interactions with it to necessitate creation of a Single Page Application (SPA).
Hence, we have decided to instead go with server side templates to render the HTML pages and not create a SPA. Thus, as part of this contest, we would like you to re-implement the UI Prototype. Build a web application server, use ejs as your server side templating engine and render the HTML pages.
As you build it out, you have to organize the templates well. Follow the DRY principle and arrange the templates in a well laid out hierarchy.
You need to build out the following pages (check the UI Prototype):
- Login.html
- Register.html
- Home.html
- Career_Exploration.html
- Career_Details.html
- What_is_This_Job.html
- What_do_I_Need_For_This_Job.html
- Job_Outlook.html
- How_Do_I_Get_This_Job.html
Note that you are NOT building a SPA. Thus, make sure that you chose semantic paths in your URL to access each html page. Do not name them arbitrarily.
Additionally, you need to use jQuery (v3). Again, you are required to organize the scripts well. It is better to associate each script with a template or web component (only for development and maintenance purposes) and set up a proper build system that can combine the script files when rendering the templates.
Your build tool should be Webpack. Set up the Web Application server using Expressjs. We recently concluded a contest that organized the stylesheets. Make sure that you also create a build process to compile the SASS stylesheets for display.
Login.html / Register.html
Implement a mock Login and Register service. Currently, we have a backend API server still being developed. The idea is to have the Web Application server interface with the API server as and when required. Until the API server is ready, assume that you can carry out CRUD requests to the API and set up a mock Login and Register feature. Note that the Login itself is not mocked. User should be able to Login and Logout (assume clicking on the profile pic at the top right logs the user out) and you are required to keep track of the user’s active session such that web pages that cannot be accessed without having the user logged in should redirect the user to the Login page (and then on successful login, redirect the user back to the page the user was trying to access) in case the user has not logged in. What you have to mock is the calls to the API server.
Home.html
On this page, the “My Activity Feed”, “My Badges” and “Leaderboard” sections data will be fetched through the API. Thus, mock calls to the API server and render these sections. The carousel in the Leaderboard should work.
Career_Exploration.html
The “Best Match Careers” section data will be fetched from an external API (like Glassdoor for example). Mock the API call and render this section in the page. You don’t have to implement Pagination yet, though retain the mock pagination elements in the UI.
Other Pages
This refers to the Career_Details pages (Job Overview, What is this Job and other related tabs). While these will also actually be fetched from external APIs, you DONT have to create any mock API calls here. You can render the data statically without calling any services to fetch the data.
Points To Note
- We wish to again emphasize that this will not be a Single Page Application. You don’t have to use Angularjs. Each page will have its own URL route. Use proper anchor tags with correct href attributes.
- We will replace the mock API calls with real ones once the API server is ready. Create services in the backend that will make mock API calls. The services itself will not be temporary or mocked. We will replace the mock API calls with real ones in the same service. The API calls will primarily be CRUD in nature and thus, you may have to carry out additional processing or formatting of data in the service itself.
- All requests from the User Interface will be to the Web Application Server. The Web Application Server will make requests to the API server as and when needed. The User Interface will never make direct calls to the API server.
- The Web Application server needs to handle authentication and authorization. In this context, it will make an API call to validate the user credentials.
- Use Eslint for the backend and follow AirBnb’s Javascript styleguide by extending the linter configuration.
- Use Nodejs v6.5 for the backend.
Final Submission Guidelines
- Make sure that you use the Topcoder Deployment Guide Template
- Zip your submission and upload it
- Unit Tests are not needed. However, submit a video of your app in action.