Reboot Rebels

Portfolio website of Cyber Sapiens Team 3.0

Comment 1

Inspiration 👾

Our group is called Reboot Rebels but we've designed the web app as a reflection of our own pod name, Cyber Sapiens. To provide an immersive feel, a video of a humanoid figure on the homepage greets visitors. Alongside a sleek and minimalistic design, the theme across the website is futuristic as reflected by the fonts and colour schemes.

What it does

Please find below a summary of some of the key features of our site:

  • We have included details about who we are, what we do, where we study, and what we like to do in our spare time for those who would like to learn more about us

  • We have also included an interactive map of places around the world that we've visited so that you can see where we’ve been!

How we built it 🏗️

We built the website using Flask for the backend, HTML/CSS for the frontend and JSON data files as well as pulling Google Maps API data. We collaborated over Github and discord to communicate and review each other’s commits to approve pull requests.

Challenges we ran into 😓

  • Planning for a responsive site design was a challenge, as we had to think about how to optimize the code and make sure that everything would work on all screen sizes.

  • We had to focus on the layout and make sure that it looked appealing to different user personas, rather than just showing off our work. It was important to keep in mind that we want other pod members to see our progress within this project and make it scalable to build upon in the future.

Accomplishments that we're proud of 🍾

  • Rendering the Google Maps Interactive Layout

  • Creating a fully functional full-stack web application using flask despite the short timeframe

  • Applying all expected Git/Github best practices in a constructive and collaborative manner

What we learned 💡

  • 🛠️ Backend

Creating a file structure that works with the Jinja2 template engine

Using template inheritance to share data across multiple web pages

Rendering web pages and sharing json data through flask for use within templates

Pulling data from the Google Maps API

  • 🖥️ Frontend

Wireframing and prototyping using Figma.

Designing a cohesive, consistent and functional UI/UX.

  • ⚙️ Git/Github best practices

Utilising a Git collaboration workflow

Creating issues to track tasks that require work

Developing each feature in a corresponding branch

Implementing a code review process to commit work, and get feedback from project members

What's next for Reboot Rebels 🤖

  • Implement more template inheritance throughout the website

  • Add more functionality to our web apps with a database rather than JSON data files (Added IDs within current data files to make migration easier within a db schema)

  • Add accessibility features to the web app while maintaining good design principles

Share this project:

Updates