Product Development: Dynamic Web Application made with vanilla Javascript
Competences
- To be ready to collaborate effectively with peers in order to achieve a common goal
- To be ready to learn and apply new technologies independently
- To be ready to exhibit the results of a collaborative work
- Coming up
- Coming up
Description
In the modern web, the applications are mostly made on top of countless amounts of libraries and frameworks. But just using all this technology without knowledge about their inner workings is not wise for someone seeking to become a good professional and creating a successful career.
In this Product Development Guide the students will create a Dynamic Web Application without the use of Javascript frameworks, in other words with “pure” or “vanilla” Javascript.
The group must produce a written description of a product (briefing) which fits in this Guide’s requirements, and proceed to develop that product. The product can be fictitious or real, meaning the beneficiary can be the students or an external institution. Some theme ideas are listed in this Guide but do not represent, by any means, subject boundaries. The students are encouraged to use their imagination and networking to find interesting project ideas to work on and exercise the web development skills related to this Guide.
Group arrangement
Students must assemble in groups of 3-4.
Minimum requirements
- Use Agile Development techniques (e.g. Scrum, Kanban, pair programming)
- Creation of an original design (i.e. created by the group)
- The application must be responsive
- Creation of a Dynamic Web Application, which should:
- Be created using only pure Javascript (no frameworks allowed)
- Front-end frameworks (such as Bootstrap and Tailwind) are allowed for their CSS features, but not for the Javascript ones
- The application should do data persistence with the localStorage API
- No need to use databases but students are welcome to introduce that layer of complexity
- The application should offer multiple interaction points (e.g. add/remove items from a list, a custom form validation, etc)
- Final product must be available online (no need for a paid domain)
Deliverables
- Link to project briefing
- Link to design files for all pages (include responsiveness)
- Link to style guide
- Link to repository containing the project’s code
- Link to access the project online
- Group presentation about final result
Theme ideas
- Pixel drawing app with sharing capabilities
- Productivity tracker app
- A super-charged to-do app
- A color palette creator
- A platform game
- An app to make music