Deployed on https://bc15-w8-project-front-end-tech-ti-tens-mu.vercel.app/
Working on: Loading time or adding a loading screen, Render takes time to spin up so can appear to have frozen, this is an issue that I would like to fix.
The Revision Tool was created to aid retention of the bootcamp course knowledge so far. It covers HTML, CSS and JavaScript.
Bootcampers were encouraged to use spaced repetition and interleave the course content to focus on increasing retention and helping knowledge pass into the long term memory.
- Problem Statement
- Idea / Solution
- Dependencies / Limitations
- Future Scope
- Setting up a local environment
- Tech Stack
- Lessons Learned
- Authors
- Acknowledgments
The brief was to build a solution to a bootcamper problem. It was vital that we were pragmatic with our approach in order to complete the Mid-term project (week 8).
There was an enormous amount of content over the first eight weeks at the School of Code bootcamp and we were encouraged to use spaced repetition and interleave our knowledge to boost the retention of the key information.
Bootcampers don't tend to have a lot of time or energy after a full day problem solving, learning new tech, reading docs or creating solutions so we wanted a quick, easy and fun way to help retain some of the things that we had learned.
Our solution to this was to build a simple app to challenge the user to remember the answer to true/false questions. We designed, ideated and built this app in 5 days. It has a front end built with HTML, CSS and JavaScript and a back end that is hosted by a database, we created an API to manage the data requests.
For technical skills we used HTML, CSS and javascript, other skills included the ability to think calmly under pressure in order to meet the brief in the short timeframe. We collaborated to ideate, design, build and demo a product within a week. This provided the first experience of writing questionnaires to correctly define the problem and generate User Personas.
There was also a focus on including accessibility into our build. We considered it from the design phase and wanted to ensure that fonts were large and contrasted suitably to ensure readability. The borders flash a colour to indicate a correct or incorrect answer in addition to text being displayed. We also ensured the app could be used with a keyboard only to navigate the options.
- In it's MVP stage, we currently have no auth or permissions built into the app. This is something we decided to not do early on with a focus more on features, however we recognise the importance of a log in and the ability to track a user's score over time.
- The app only contains true/false style questions. We planned to extend this to add variety including word fill or multiple choice style questions.
- We are using a free tier of Vercel for hosting. This may result in the app being slow to load and/or not being able to store all of the users data.
We came to an agreement to have regular commits to our feature branches which were closed once the feature had been merged. In this way we were able to collaborate between our front end and back end team, updating the others on our progress much more easily. We used a seperate repo for the front end and the back end. One of the challenges we faced was around CORS when it came to linking the two.
- A long term goal would be to add AI to generate questions based on the user's strengths and weaknesses. Another feature may be to use AI to generate a specific pathway for a user to follow if they want to focus on a topic.
- A more immediate goal would be to add a log in feature to enable more than one user's information to be stored and tracked.
- We are aware that we need to add a variety of question styles and update the questions from the initial bank. These are stored in a database so this would need to be done manually. It would be useful if we could automate this.
You can visit our app here -> Revision app
- [CSS] - Styling
- JavaScript - Coding Language
- NodeJs - Server Environment
- Playwright - Testing
- ElephantSQL - Database
- How to implement an MVC style backend to streamline the way it works and ensure that it is robust and scalealbe in the future.
- We lost time waiting for the back end to create the database and designing how the data object would look before the front end could write the code necessary to import the question logic into their code. In future, to remove this blocker, it would be discussed and a mock up made that both teams work from.
- Good planning in general goes a long way and then the code basically writes itself.
- Having a different Scrum Master per day allowed for easy decision making, task priorisation and day-to-day structure.
- Making big decisions as a team and moving on with the intended plan.
- Accessibility is extremely important. We learned to have this in mind from the very beginning of the process, from desing all the way through.
- Understanding about the architecture of a full-stack app and how to link the front end and back end.
- Playwright testing - check for the box rather than the content. We don't want brittle tests!
- Energisers make for a happy team!
- https://www.linkedin.com/in/victoria-e-2b0532279/ - Victoria Eyres
- https://www.linkedin.com/in/gavin-yip/ - Gavin Yip
- https://www.linkedin.com/in/wing-kit-leung/ - Wing-Kit Leung
- https://www.linkedin.com/in/andy-carey/ - Andy Carey
- https://www.linkedin.com/in/james-cooke2003/ - James Cooke
- https://www.linkedin.com/in/haya-minhas/ - Haya Minhas
Big thank you to the School of Code for all the support and guidance!