learn how to build a dynamic, server-backed website. take part in a competition to win thousands of dollars.
At its core, web.lab is a 6-Unit MIT IAP Class which teaches the fundamentals of web development. It lays the foundations for understanding complicated web techologies using the fundamental building blocks of HTML, CSS, and JavaScript. In addition to learning how to build a website, students enrolled in web.lab may also take part in a competition to win prize money and glory.
Starting IAP 2019, we decided to transition our name from the official course number (6.148, now listed as 6.9620) to web.lab. The course number, while effective within MIT, was pretty meaningless to the outside world. We also wanted a name which conveyed what our class truly is: a fun, creative, technical lab where you get to iterate and build an awesome product with your peers. As such, we rebranded ourselves as web.lab.
The structure of web.lab can be split up into three phases.
During the first week of web.lab students form teams of up to three members. Team members should contribute an appropriate amount to receive individual credit for the course. Students tend to have the most fun and success coming into web.lab with a set team, however this isn't always true. Many great websites come from teams which are formed at the end of lectures. This is also a great way to meet other students at MIT!
The learning phase of web.lab lasts for the first two weeks of IAP. During this period staff teach lectures and run workshops every day. By the end, we build a fully-fledged website together with the students in the class. In the first week we walk through the basics of web development: how to program in HTML, CSS, and JavaScript, how to launch a backend server using node.js, and how to integrate a database into your web-app using MongoDB. In the second week, we teach more advanced topics and sponsors give cool lectures on how students can utilize industry techniques and technoligies in their project.
The building phase of web.lab is kicked off with a hackthon on the last day of lecture. From this point onwards we let students be to maximize time available to work on their websites! Staff host many office hours during this period and are constantly answering questions online.
The competition for web.lab is a great way to demonstrate the hard-work you've put into your website over the course of IAP. In addition to glory and fame, winners of web.lab get cash prizes and many times even receive job offers. We strongly recommend entering in the competition and putting your best effort throughout IAP!
All students who are officially enrolled in web.lab through MIT are eligible to enter the competition. Cross-registering students are also eligible. The official MIT course number for web.lab is 6.9620. Another requirement for the competition is that at least one team member must be availble on campus during the final week of IAP to present his or her team's website to judges.
In web.lab we will be using Github for milestone and final submissions and to make it easier for you to turn in your source code.
For this milestone, you will choose an idea for your website. You will then flesh out the idea as well as draft some initial designs for the website, before you do any coding. You and your team will give a casual pitch of your website idea and designs to staff and sponsors for review and feedback. This is not a formal presentation, it's just to ensure you are on the right track with your idea and design, and for you to ask questions directly in person about your website.
We will have time slots available between 1PM and 5PM on both Saturday, January 13 and Sunday, January 14 in Room 32-044 (Basement of Stata Center). You will have 3 minutes to present a quick, casual pitch, followed by some questions and feedback from staff.
Please make sure your pitch contains the following content, as well as a few slides with your initial designs and mockups. There will not be any projectors in the room, so please bring your laptop to show them.
If no members of your team can make it to the time slots we have listed, please create a private post on Piazza and we can help you schedule a make-up session.
For this milestone, we would like to see that you've made
significant progress towards your final product by looking at your MVP.
You may wish to review the technical requirements to ensure that your
site meets these basic requirements.
Remember, your MVP should capture the essence of your application
and include your most important or compelling features.
As such, your app should go beyond a simple skeleton or scaffold.
Users should be able to get the essence of your application via a
fully-functional important feature.
You should have, at minimum:
In addition answer the following questions:
Please submit your team's website at the appropriate form above. Note: this form will close at exactly 12 PM (in the morning, so we can get back to you earlier!); submissions will not be accepted after the form has closed.
please note that if, at 12 PM, your site is broken in any capacity (link doesn't work, login doesn't work, site crashes, etc), your team will not be eligible to advance to the semifinalist round. For this reason, we recommend that you do not change the site while we are judging, since if it breaks we will not allow your team to move on as a semifinalist.Additionally, please be aware of the following if you are chosen for a semifinalist:
Dynamically-generated, database-backed pages.Your site must contain pages that are produced dynamically by some server-side application (e.g. Node.js, Ruby on Rails, PHP or Python scripts) using the results of queries to some database or other data service. You should use MongoDB -- what we teach in class -- or if you would like to use something else, please confirm with staff first.
Personalized experience based on user accounts. Your site must have a sign-in feature. You may implement your own username/password login system or use an existing system (e.g. Facebook or Google login). The content and/or UI of the website should reflect whether a user is logged in and display some non-trivial user-specific content. You are not required to implement account management (e.g. password recovery). Note: If your site uses MIT certificates, you must implement an alternative form of authentication for our non-MIT judges.
Original design and implementation. Your site's high-level design and the implementation of key features must be original. You may use Web application frameworks like Express.js or Ruby on Rails and frontend frameworks like Bootstrap and Backbone. You may use open-source components as long as the top-level design is original and your site's main functionality is not simply a wrapper around the component. You may not customize a CMS system such as Wordpress for your site.
Pre-generated dataset. Your database contains a processed version of a publicly accessible dataset, or you can bootstrap your site with fake data. If you choose to bootstrap your site by generating data, be creative! Judges will be bored by a site where the same three names show up everywhere!
3rd party data access. Your system uses another application's publicly accessible API to access and return data on the fly. You must declare all 3rd-party APIs that you use. If you go this route, you should use a database as a cache and fallback mechanism for the API requests. You will be disqualified if your application malfunctions after the submission deadline as a result of a broken 3rd party API.
Data visualization. Your application presents data in a visual manner that enhances the users' understanding of the data. The visualization should highlight some feature of the data that isn't obvious or trivial. The user must be able to influence which data gets displayed in the visualizations. You are allowed to use a pre-existing implementation for your visualization, like a jQueryUI widget, provided that it fits with your application. Remember that all widgets and libraries must be cited.
Dynamic filtering. Your application shows a small (< 10%) subset of data which is most relevant to the user at the moment, or ranks the data such that the most relevant items are shown first. The subset and/or the ordering of the data must change in response to the user's actions. Three examples that would fulfill this requirement are full-text search, criteria-based search, and a "recommended for you" section. For the latter, you will have to convince us that the contents changes based on user actions.
Asynchronous viewing/modification of data. After your application is loaded, future additions, modifications, or deletions are done asynchronously (without a new page load). A "single-page app" that contains significant functionality implemented via asynchronous calls to your server would satisfy this requirement.
Plagiarism. We will ask you to name all your team members and list all the 3rd party data, code, and media that you have used. Please keep careful track of your sources, just like you would for any other course, and include a citation of ALL sources used. This includes, but is not limited to, the use of: 3rd party libraries, code distributed by the staff, code snippets shared on Piazza, and code snippets found on StackOverflow or other forums. For all components of your application that are not your own, include a citation in the README of your repository. Additionally, for code snippets pasted (with or without modification) into your source code, include a brief citation or link to the origin of the code as a comment in the code itself. Plagiarism may result in disqualification, a failing grade, and referral to MIT's Committee of Discipline.
Third-party code/data/media. Any code or content that is not your own must be public available at no cost through legal means. This includes content such as images, fonts, and stylesheets. All such code and content must be cited in your repository's README (see Plagiarism section above). You may not use any code that you wrote before January 8, 2024, unless it was publicly released.
Straight-forward evil. Do not spam or host malware. Do not encourage or assist users in breaking non-disclosure agreements or infringing copyright. Your site must not provide a haven for discussion or sharing of topics violating relevant local, state, and Federal laws, including copyright law. Do not abuse MIT's infrastructure or databases. Do not interfere with other contestants' development process.
Projects entered into the contest and eligible may win prizes (the following are prize amounts from 2024).
In addition, teams may be awarded special prizes at the discretion of the staff. They may be awarded to one or more teams, or to no team if the staff feels that no team is deserving of the prize. We may also add more prizes to this list!
You can indicate whether you would like to be considered for any of these special prizes during the final submission.
Prize: $500
Awarded to the team that, as determined by the staff, created a site with the most unique, interesting, and compelling concept. This site would solve an interesting problem that doesn't have an established solution or address one of the competition themes in a creative way.
Prize: $500
Awarded to the team that created a site with the best responsive design across screen and device sizes.
Note: To win this prize, you may NOT do any sort of device or user-agent detection and send different stylesheets in the response or redirect to a “mobile version” of the site. The staff may test your site on all reasonable resolutions, resize the browser window, and view your site on any common smartphone or tablet.
Prize: $500
Awarded to the team that, as determined by the staff, implemented the most innovative, well-designed, and interesting UI feature. Think about the UI lecture - how will you surprise users (in a good way) and use your UI feature to draw users to your site? Take risks and be bold!
Prize: $500
Awarded to the team that, as determined by the staff, implemented the most impressive feature or algorithm on the backend. This can be a cool use of various technologies, design or implementation of a nontrivial algorithm, or something else on the backend. Surprise us!
Prize: $250
Awarded to the team (among all submissions) that receives the most Facebook likes. Votes will open when semifinalists are announced and will close during the awards ceremony.
To be considered for judging, your team and the site you produce must abide by the competition rules.
When judging contest submissions, we will focus on four main areas:
More details about each category are below.
Errors: Does your site load without errors? Are there portions of the site that are not implemented or don't work as intended? Do actions on the site cause uncaught errors or exceptions?
Features: How many features are implemented? Are they useful, nontrivial, and well-polished? Note that this is not a race to implement as many features as possible -- judges will be more impressed with a reasonable number of polished, well-executed features than a large number of poorly-implemented features. A large, incohesive feature set also reflects poorly on usability and concept execution (see below).
Response time: Does your site take an egregiously long time to display results? Note that we are not going to benchmark your site or judge your algorithms, but a site that takes five minutes to load query results is unreasonable.
Security: Can the site be broken with the simplest of attacks? Note that we will not mount complex attacks against your site. The basic mitigations discussed in lecture will suffice.
Ease of learning: Can a user encountering this web site for the first time easily discover what the web site does and how to make it work?
Visibility: Is important information and system state readily visible on the site? Are features clearly indicated?
Efficiency: Is it easy for the user to access all features of the site and be able to use them? Are there mechanisms built in for experienced users to save time? Efficiency generally does not refer to response time, but to how easily the user can perform common tasks on the site. For example, a feature that requires many mouse clicks across many menus to access has poorer efficiency than a features that requires few clicks.
Safety and recovery: Is it easy for a user to make a mistake? Is it easy for a user to recover from a mistake, via undo, edits, or other mechanisms?
Layout: Is the overall layout of your site simple or cluttered? Are the user's eyes immediately drawn to the most relevant parts of the page?
Consistency: Is the visual design of your site consistent across its components? Is there a familiar, comfortable set of colors, shapes, and fonts used?
Attention to graphic design: Have you considered the basics of graphic design, including: color, balance and whitespace, and typography?
Aesthetic innovation: Does your site do something particularly fresh, bold, or innovative in its visual design? This could be in the execution of a single feature or visualization or in taking a bold approach to the overall design of your site.
Problem statement: Is the problem clear and well-defined? Is it a real, existing problem?
Conceptual clarity: Does your solution employ a number of clearly-defined concepts? Concepts are ideas and notions that manifest themselves clearly in the implementation of your solution, or a common thread that runs through your feature set.
Feature set: Does your application consist of a coherent, well-thought-out set of features? Do the features make sense when considered as part of a larger whole? Do the features address the problem to be solved?
Originality: Does your application solve the problem in a way that hasn't been done before? Note that you may do well in this category even with a well-established problem, as long as your solution is novel.
The final submission will be a form, to be posted to the Milestones page at a later date. This form will close at exactly 12 PM (that's noon!) on Wednesday 1/31/2024.
After the submission form closes, the staff will identify semifinalists. We expect to have around 12-18 semifinalists (for the Main Division) depending on the quality of the submissions. Results will be announced by 8:00 PM of the same day.
Semifinalists will have a 15 minute time slot on Thursday 2/1/2024 from approximately 8:30 AM to 4:00 PM to give a 5-minute presentation to the judges and answer questions about their site. We recommend that your presentation explain:
From the pool of semifinalists, the sponsor judges will determine the top teams. The results will be announced at the Award Ceremony.
PLEASE NOTE: Your team is allowed to make changes to your site after the final submission deadline. However, if you site is broken when we look at it, you will not have a second chance, so make updates at your own risk.
{web.lab}