A Set

Business problem

At CodeYourFuture, trainees build many front ends, sample websites, and layouts as we learn web focused software development.

We use stock imagery sites, like Pexels, Unsplash, Pixabay, and other royalty free stock image sites, to find photographs, icons, illustrations, and other graphic assets.

But we also create lots of assets and we don’t have a way to share them with other members of our organisation.

How can trainees discover and use these assets in an organised way?

Proposed functionality

• User accounts

• A way to upload assets

  • How do we make sure we have the rights to these assets?

  • Should anyone be allowed to upload?

• A way to discover assets

  • Can assets be described with keywords or tags?

  • Should they be organised into categories or folders?

  • What sort of categories? Does image size matter? Type?

• A way to use assets

  • Can we provide an API as we know trainees will be building lots of front ends?

  • Do we need bandwidth limits?

  • How do we protect our images so they are not used by other people?

These assets should be stored in a PostGreSQL database and displayed by a React front end.

Users and roles

As a trainee, I want to quickly grab images and assets that represent me and my community.

As a mentor, I want to quickly grab images and assets that represent me and my community.

As a mentor, I want a go-to place to pull assets from to brand my CYF projects and tutorials instead of making them myself every time.

As a staff member, I want everyone to use assets that we have the rights to use.

Stretch goals

• User collections

  • A user can collect assets into a themed collection they can share with others

• On the fly API

  • Collections are also available as JSON so users can consume the images in their own application.

All Eyes On Me (DevOps, QE)

Business problem

At Code Your Future, trainees open pull requests to coursework repo every week. Mentors work really hard to review PRs when they can, but a lot of time is wasted on getting the basics right: PR message filled in, acceptance criteria met, linting enabled, that often mentors run out of time before they can get to more substantive commentary. Trainees don't get as much feedback as they really need.

How can trainees get automated feedback on the basics?

Proposed functionality

• A way to define basic PR quality standards

  • How will you set these? There are some notes in this briefing on typical mistakes CYF trainees make on every repo..

• A way to test each PR

  • Github Actions can be run on PR. What existing automated testing exists in the repositories and how are they different across modules?

• A way to reject each PR

  • We want to know which PRs are ready for human review, so how will you reject PRs that need more work before they can be looked at?

• A way to share the standards

  • Actions can be published to a marketplace or stored at an org level. What will you choose?

Your solution/s should be available to everyone at CYF and be modifiable by mentors.

Users and roles

As a trainee at Code Your Future, I want help with making my PRs meet professional standards.

As a mentor at CYF, I want to make sure every trainee gets some feedback so they become the best they can be.

As a module lead, I want to get automated reports of trainee PR quality across a whole module or all of CYF (but this is a stretch goal)

What else do users want? How will you find out? Some user research may be needed. Remember: Do the simplest thing that could possibly work.

Stretch goals

• Reporting

  • Automated and aggregated reporting to show us patterns over time

Things to consider

Here are all the repos trainees open PRs to https://github.com/CodeYourFuture/Table-of-Contents

There are existing tests running on some repos at CYF. Can your solution work with those tests? Make sure you don't disable existing, working solutions.

One approach to testing PRs is to write all the coursework answers in a file and check the PR code for them. Why is this not desirable? Another approach is to fix the errors for the contributor. Why is this not desirable? (Remember, at CYF the goal is to learn.)

Errors common to all CYF trainees in all weeks

Terrible communication

• A single giant commit with no descriptive messages

• PR message template not completed and nothing explained to or asked of reviewer

• PR not titled as asked but something like "final" or "my work"

Junk changes

• Junk files in the PR from using git add . (node modules, DStore, etc)

• Old work from previous weeks in the PR

• Formatting - not having Prettier installed

• Loads of commented out code left in the files

Empty PR

• There's basically nothing in the PR but it's not opened as draft

Appanage

Business problem

At Code Your Future, we build loads and loads of team projects. We invent products, build apps and solve problems together. We use many products built by CYFers: the Dashboard, Classplanner, the Curricula, Signposts, Rainbird, and many more were all built in-house and some as "final" projects.

We have a great time and learn a lot, but good work is often lost because nobody maintains the product after the build is done. We still need a working attendance system, even though we've built several, and everyone wants one.

It should go like this:

💡Idea ➡ 🧪CYF Labs ➡ 🎁CYF Products

Experimental products implicitly belong to CYF Labs. Once they have been trialled and proven, they can be proposed to CYF Products, and if there's a team and a solid use case, they will be accepted.

But most CYFers don't know this. So, how can CYF volunteers discover and adopt products CYF needs?

Proposed functionality

• A way to produce listings of available products

  • What schema will you use or define to describe available repositories?

  • What information do CYFers need to understand how to adopt a build?

• A way to organise participation

  • How will people sign up to adopt a build?

  • All these products should be Open Source; how will you also open up contributions from the broader FOSS community?

  • How will you empower CYFers to support specific products they want?

What is the simplest thing that can possibly work?

These product listings should be stored in a database and displayed by a front end which scores 100 for Accessibility on Lighthouse. You should produce a public unauthenticated API.

Users and roles

As a trainee, I want to develop my skills to help me get on to a CYF Products team when I'm ready

As a developer, I want to sign up to build things for real users to keep me motivated in my coding

As a mentor, I want to scan open listings and get a sense of the current builds and what I can help with

As a staff member, I want everyone to feel empowered to participate in the universe of CYF Products so I don't personally die of exhaustion trying to organise it all

Stretch goals

• Slack feed

  • Should new products be posted to Slack? Will you create a webhook?

• Product space similarity vector

  • There are often multiple takes on the same problem. Can you group products by similarity?

Things to consider:

Why aren't products adopted? There are many reasons, and not all of them can be solved. What happens in between the build and take-up? Understanding this gap will help you build something that can bridge it.

Is it desirable for every product to be adopted? Why or why not?

How can the Change Board help you? https://github.com/CodeYourFuture/Changes

Useful links

https://docs.codeyourfuture.io/trainees/cyf-products

https://www.gov.uk/guidance/the-technology-code-of-practice

Avanart (FE, UX)

Business problem

At Code Your Future, we interact on many different platforms: GitHub, LinkedIn, Slack, Codewars, and more. We all choose a single, consistent, avatar, so we can recognise each other in all these different contexts.

But not everybody can share a picture of themselves online in our community, so many people use Robohash to generate a unique robot avatar from their name.

We want our own CYF-flavoured robohash!

Proposed functionality

• A way to generate avatars

  • Robohash is open source https://github.com/e1ven/Robohash

• A way to search avatars?

  • How will full-text search work on your product? Will you build it yourself or use services like Algolia or Lunr? What are the advantages and disadvantages of these?

• A way to share avatars

These avatars should be generated and displayed by a front end which scores 100 for Accessibility on Lighthouse. You can choose the framework or build in native web components.

Users and roles

As a trainee at Code Your Future, I want to get a personal avatar so everyone can recognise me

As a mentor, I want a CYF-branded avatar system so I can easily recognise CYFers online and say hi

What else do users want? How will you find out? Some user research may be needed.

Stretch goals

• Regional avatars

  • In North West, the different cities have different symbols: Manchester are bees, Leeds are owls, Liverpool are liver birds (cormorants), and Sheffield are smiths (Thor and Vulcan). Can you find a way to create regional avatars that incorporate these symbols? Can Boring Avatars help you?

• Lighthouse CI

Can you integrate Lighthouse testing into your deployment workflow? Who will define the Github action? How will you decide what budget to set?

• Gravatar Integration

  • Can you design a user flow to https://en.gravatar.com/ to share the avatar on many services at once?

Important Note to Developers: This project could be highly challenging or could be a fairly simple implementation of an existing library. The real skill here is to start with the simplest thing that could possibly work.

If the groundwork is solid, this project could be adopted by CYF Labs, so get the fundamentals right first.

Badger Badger (DevOps)

🦡 🦡 🦡 🍄

Business problem

At Code Your Future we have a bunch of great Open Source products, but they're not all in the greatest shape they could be. To really shine, our FOSS repos should meet the highest standards of https://www.bestpractices.dev. But to do this, we need a team of developers to understand the criteria, plan the changes, drive the adoption, and support all technical contributors to meet the new standards.

This highly challenging project is only suitable for advanced trainees or grads doing a specialisation track.

Proposed functionality

At least one CYF FOSS project should meet the requirements for a passing level Badge https://www.bestpractices.dev/en/criteria/0

Users and roles

As a FOSS maintainer I want my project to be well-run and of good quality

As a CYF organiser, I want to attract talented developers to volunteer with us

As a CYF trainee, grad, or volunteer I want to contribute to impressive codebases and raise my profile

As a CYF DevOps track trainee, I want to gain practical experience in creating a culture of excellence in an organisation

As the Director of Education, I want to share our work and have properly represent the talents and achievements of our community

Likely challenges

There are over 600 repos in CYF, and you can’t do them all. I suggest you start small. Do the simplest thing that could possibly work.

Stretch goals

Silver, or Gold!

Careless Whisper

Business problem

At Code Your Future, mentors and trainees hold many study sessions. Often people record these sessions, which is very helpful.

But not everybody can learn or absorb from video teaching. Some people really need a transcript. (Others desperately need a summary. )

How can trainees use Whisper to transcribe study sessions? How can they discover and browse those transcripts in an organised way? And could they even summarise those texts? How?! What is the simplest thing that could possibly work?

Proposed functionality

• A way to use Whisper

  • How will you teach users to do this? Will you write a tutorial page? Embed a video? Your users are all developers; how does this affect your decision?

  • Are there free online services users can extract their transcripts with?

• A way to upload transcripts

• A way to search transcripts

  • How will full-text search work on your product? Will you build it yourself or use services like Algolia or Lunr? What are the advantages and disadvantages of these?

• A way to browse transcripts

  • What metadata will users need? A link to the original video? A link to the module on the syllabus? What about repos on Github? Cohort name? Date? Keywords? Summaries?

  • How will users find the most useful transcripts? A voting system? Or what about most downloaded or most returned-to?

These transcripts and summaries should be stored in a PostGreSQL database and displayed by a React front end which scores 100 for Accessibility on Lighthouse.

Users and roles

As a trainee at Code Your Future, I want to get targeted mentorship on the coursework I am completing.

As a trainee who reads better than they hear, I want transcripts of everything.

As a trainee who has four kids and two jobs, I want a summary because I don’t have two hours to watch a video.

As a mentor at CYF, I want as many trainees as possible to be able to access the study sessions I run.

What else do users want? How will you find out? Some user research may be needed.

Stretch goals

• Video upload

  • For teams with a Systems track developer, can you build A/V upload and process with Whisper in the cloud? What open source examples exist that you can use to help you?

• Lighthouse CI

Can you integrate Lighthouse testing into your deployment workflow? Who will define the Github action? How will you decide what budget to set?

• Summarise AI

You’ve taught the community to transcribe using one AI model. Can you teach them to use a summarise model? Which of the 700+ public models could you use? Teams with a PM, Product Owner, and Tech Lead should workshop and roadmap this feature, even if you don’t build it.

Important Note to Developers: This project could be highly challenging or could be a fairly simple text search and filter view. The real skill here is to start with the simplest thing that could possibly work.

If the groundwork is solid, this project could be adopted by CYF Labs, so get the fundamentals right first.

Clarissa Explains It All

Business problem

At Code Your Future, Sally explains things. She actually cannot be stopped.

Of course we all have Google and can look things up ourselves. But in programming, for every problem, there are many right answers. What CYFers want to know is: which right answer have we agreed to use?

In collaborative software development, the most important thing is that everybody agrees on the rules of the road. Much like traffic laws, it’s not that driving on the left or right is better or worse, it’s that everybody must agree or we will drive into each other.

How can developers build a knowledge base of answers?

Proposed functionality

• A way to ask questions

  • What interface will you build to help the user interact with the model? Do the simplest thing that could possibly work.

• A way to rate answers

  • You’ll want to improve your model by flagging bad answers.

  • Who decides bad answers? Do admins and users have different levels of authority here?

The application should store data and display an interface which scores 100 for Accessibility on Lighthouse.

Users and roles

As a trainee at Code Your Future, I want to find out simple quick answers to my questions without reading a zillion docs.

As a mentor, I want to improve processes without creating a burden for others or a constant backlog of outdated docs..

What else do users want? How will you find out? Some user research may be needed.

Your CYF model will be supplied as a hosted model on huggingface but please give notice so CYF can prepare this for you.

Stretch goals

• Fine tune

Can you create a way to update information by fine tuning with new facts?

• Slack bot

  • Can you create a Slack bot to bring the question and answer interface into Slack?

• Lighthouse CI

Can you integrate Lighthouse testing into your deployment workflow? Who will define the Github action? How will you decide what budget to set?

[Note: this challenging project should only be attempted by a strong group of developers who have a tech lead familiar with machine learning.]{.mark}

Deja Review

Business problem

At Code Your Future, we like to use a learning technique called spaced repetition. In fact it is set as prep work several times during the course. The technique involves reviewing a topic over increasing time gaps (e.g. after one week, one month, three months, six months, one year).

What is the simplest thing that could possibly work?

Proposed functionality

• A trainee can add the name of a topic and the date on which they first learned it

• The system then calculates the dates on which they should review

• The computed dates could be stored in the browser and displayed when the trainee revisits the website

Users and roles

As a trainee, I want to easily calculate the dates when I should be reviewing a newly learned topic.

As a trainee, I want to know which topics I should be reviewing so that I can plan it.

Stretch goals

• Integrate with Google Calendar / iCal / Outlook to allow future review dates to be added my calendar and notified about them

Things to consider

Leaning into browser storage seems like a good way to avoid building an auth system (which is a difficult challenge of its own).

Deskeando

Business problem

Who will work where, and when?

At HaveALook Multicorp, there are 50 desks in the office, but no way of organising who will work where. People may work alone, in pairs, or in larger teams, and these groupings change all the time. Sometimes there are Covid restrictions on how many people can be in the office and those change often too.

They need an application to manage this problem, a way to book desks in advance so everyone can be sure they have space to work.

Proposed functionality

• A user account for each office worker.

• A way to see what desks are available

• A way to navigate a calendar of availability.

• A way to see the features of different desks.

• A way to book a desk for yourself.

• A way to book desks for others in your team.

• A reminder of an upcoming booking

• A way to cancel a booking.

The database of bookings should be stored in a PostGreSQL database and displayed by a React front end.

Users and roles

There are developed personas for this project:

https://www.figma.com/file/4bit1t0X7VZB7XFCysGIhV/CYF-Project-Team-7?node-id=0%3A1

Please develop your user stories based on these.

Challenges

You will need to integrate a visual map - probably in SVG. You will have to make sure your SVG is accessible by keyboard and screenreader. How will you test this?

Most users will access the booking application on their phone, so your design should be “mobile first”.. How will you make the design flexible and flowing so it also works on desktop?

Stretch goals

• SMS notification

  • A user can cancel a booking directly from a reminder text

• User Testing

  • Recruit a group of users and run UX testing

Further resources

Draft of proposed Featureset

Main screen (X week view)

• show all bookings for upcoming X week time period

  • As an employee I would like to see all bookings for the upcoming time period so that I can choose my days to book with maximum information

• show number of available desks for each day

  • As an employee who makes bookings for my team I would like to know for each day how many desks are available so I immediately avoid days with too few availabilities

• show bookings for no specific desk

  • As an employee I would like my booking to be visible so that other employees can know I’m in and choose to come in on the same day so we can get lunch

• show bookings for specific desks clustered in a way that makes taken and empty clusters visible

  • As an employee who makes bookings for my team I would like to know for each day whether there seem to be any clusters available so that I immediately avoid days with no desk clusters available

  • As an employee who makes bookings for my team I would like to have visual confirmation that my booking is for a cluster so I know that I didn’t make any mistakes

• options to navigate to future and past

• Make booking for day

  • As an employee making a booking I would like to select a date and get taken to a booking screen with reasonable defaults so that I can click ok and move on with my life

• Make booking for day/desk?

• Cancel booking for day/person

• Edit booking

Booking screen view

• Select date

  • Date is preselected

  • Date can be changed

  • Date recurrence can be selected

  • Date range can be selected

• Enter name

  • Single name is by default the logged in name (no login to start)

  • Names have a dropdown/autocomplete of known employees

  • Until we have logged in employees (not in the first increments), assume we have a pre-populated table of of employees from which names of people being booked will be logged in

    • Once we have login, can figure out what we do with not-yet-registered employees (or not-ever-going-to-be employees)

• Don’t care where I sit

  • By default

• Choose morning only/afternoon only

  • by default don’t need to do either

• Floor plan appears and can select desk (note: developers should ask questions about this)

  • Floor plan shows desks that are already booked

• Confirm button

Notifications

?

View big floor plan

?

Floorplan

🖼️

{width=“6.5in” height=“6.791666666666667in”}

Development Planner

Business problem

At CodeYourFuture, we work through a defined syllabus and our coursework is set by teachers and subject matter experts.

After we graduate, we need to take control of our professional development and plan our own learning schedule.

Proposed functionality

The app should have user accounts and all plans should default to private

Users can invite feedback on their private plans with a share link

Goals can be scheduled and tasks prompted by a notification system

All data should be stored in a database and be accessed by API

Users and roles

[As a graduate, I want to create a professional development plan with defined and scheduled SMART goals.]{.mark}

[As a job applicant, I want to create a role focused development plan to prepare for a specific job opportunity.]{.mark}

[As a mentor, I want to be able to give feedback based on my professional expertise.]{.mark}

Likely challenges

• Be careful how you structure your data as this could get confusing quickly

• How will you send out notifications? With a mailer, or push notifications?

• How will you authenticate? Can you use Github? Should you use Google?

Existing Systems

Stretch goals

• Allow role plans to be published and remixed after they have been developed

  • As a graduate, I want to share the effective development plan that helped me get a job

  • As a mentor, I want to improve a template development plan in my specialism

  • As an applicant, I want a framework to begin my own plan

• User Research

  • Speak to your classmates about what features they’d like to use. Select a sensible feature and build it.

  • Speak to your teachers and mentors to see what features they’d like to use in the app. Select a sensible feature and build it.

Ding! Next! (DX/tooling)

Business problem

At Code Your Future, we run sessions and workshops online with lots of participants. These workshops usually involve timed segments with activities, discussion, and presentations. But it can be hard to keep to time when everyone is so interesting and smart (such a problem for us!)

How can we run our calls with discipline and timeliness so we can get everything we need to do, done?

Proposed functionality

Agenda Parsing

The extension will read the agenda written in the Google Calendar description and parse the items and timestamps.

Automated Meeting Chair

The chair could sound a buzzer when the timestamp for the next agenda item is reached.

It should automatically post the next agenda item in the Google Meet chat window.

Technology Stack

• Frontend: JavaScript for the browser extension

• Backend: Google Calendar API for fetching event data, Google Meet API for interacting with the meeting

• Database: None required as it operates in real-time and doesn’t store data

Users and roles

As a meeting organiser, I want to ensure that the meeting follows the planned agenda so that it is more efficient.

As a meeting participant, I want to know what each segment of the meeting is about and when it will happen to stay engaged and contribute effectively.

What else do users want? How will you find out? Some user research may be needed. Remember: Do the simplest thing that could possibly work.

Things to consider

Likely Challenges

• Synchronisation between Google Calendar and Google Meet.

• Handling various time zones and daylight saving changes.

Stretch Goals

Voice Announcements: The extension could also make voice announcements for each agenda item.

Customisable Alerts: Allow users to customise the alert sound and message.

Development Phases

Feasibility Study: Research Google Calendar and Meet APIs to ensure the project is technically feasible.

MVP Development: Build a basic version of the extension that can read the agenda and sound a buzzer.

User Testing: Conduct tests with CYF staff and volunteers to gather feedback.

Iterative Improvement: Implement additional features based on user feedback and testing.

Deployment: Make the extension publicly available after thorough testing.

::agenda

10:00 agenda item eg description of activity

10:15 description of next agenda item

.

title: “[]{#_nn86dzvod7qx .anchor}Energise!”

Business problem

At CodeYourFuture, we run lots and lots of meetings, often with people who don’t know each other well or at all. We begin our meetings with an energiser - a game to get the group together. But because we have so many meetings, it can get hard to think of all these energisers and it’s hard to know which are good.

Proposed functionality

The app should present an energiser from a database of energisers

Energisers can be chosen by name, randomly selected, or sorted by some metric

Users can vote on the energiser according to some metrics they find useful (fun/quick/ideal number of participants etc)

All data should be stored in a database and be accessed by API

Users and roles

As a host I want to pull up an energiser suitable for my meeting and have a good description of how to run it

As an attendee, I want to upvote energisers I like and downvote the ones I found a bit rubbish

As a creator, I want to upload my energisers in a simple structured way

Likely challenges

• Be careful how you structure your data as this could get confusing quickly

Stretch goals

• Create a slackbot

  • As a host I want to to run some energisers (eg voting or answers) on a slack post that is posted automatically by the app

• User Research

  • Speak to your classmates about what features they’d like to use. Select a sensible feature and build it.

  • Speak to your teachers and mentors to see what features they’d like to use in the app. Select a sensible feature and build it.

• Dark mode

  • As any kind of user, I would like to access dark mode

• Host a game (mega stretch)

  • As any kind of user, I’d like to play simple games directly in the Energise app.

Glossary

Business problem

We introduce a lot of new concepts and technical “nomenclature” to students during the CYF course. It can be hard to keep track of all of the different terms that get used, sometimes with different meanings in different contexts. You can search for a word within the syllabus, but the output isn’t formatted and it can be hard to figure out which reference to that word will actually give a good definition.

Proposed functionality

A solution would provide an easy-to-use way to search for a technical term and get a short definition, along with links to additional resources (e.g. appropriate section in the syllabus, MDN, …) and related terms.

Users and roles

The primary users will be students looking for a definition for a specific term. There will also be students and mentors adding content, either new terms or new/updated material for existing terms. There may also be some kind of moderation/administrative role (see below).

Likely challenges

How can we moderate and review the definitions as they’re added, to ensure that they’re high quality and easily understood by students? How do we handle common misspellings, or searching for things by symbols?

There can end up being a lot of data in a system like this, how can we create a system that scales efficiently to deal with that (e.g. showing “pages” of data)?

Stretch goals

• Slack bot: that people can ask for definitions, and will reply with a snippet and link

• History: can we see how the definitions have been changed over time, and by whom?

• Syllabus integration: can we get the definition information from the syllabus somehow?

Goal!

Business problemh

At CodeYourFuture we use daily standups, goal setting, and design thinking to continuously evaluate our work and plan improvements, and we want to teach our trainees this habit too. But right now this means we have a lot of meetings, where ideas get lost, or that we do a lot of paperwork and repetitive work, writing out all of these processes. We don’t want to teach our trainees this!

We want to spend around ten minutes each morning creating our standup, ten minutes each week setting our weekly goals, and ten minutes each month - etc.

We want to systematically record our work and then programmatically create each larger time block of goals from the smaller time block: quarter from month, month from week, week from day.

This is a challenging problem suitable for advanced trainees.

Proposed functionality

A ToDo app with time settings and Slack bot conversational interface. The app must integrate with Slack as that is where everyone in our community is every day, but the app should have a GUI (website) as well.

All data should be stored in a database and be accessed by API.

Users and roles

As a user, I want to spend less time recording my goals

As a user, I want to catch things I’ve missed and keep on top of my tasks

As a user I want to share my work easily

As a leader, I want to see what my team are working on

Likely challenges

• Integrating with Slack means understanding the Slackbot API. Look at existing standup bots to see how this works.

https://codeyourfuture.slack.com/apps/search?q=standup

• How will you manage access to the goals?

• How will you manage time and navigating by time? Will you integrate Google Calendar?

Stretch goals

• Suggest items in daily standup

  • In the Daily Standup conversational interface, suggest goals from the ’to do’ bucket that are not done.

• Mark items as done

  • On the web app interface, the user can mark items as done and assign them to dates even if they were not chosen during the daily standup.

• Create teams

  • Create a role of ’team’ and allow users to share goals with their team. This could include auto-posting to a team channel on Slack.

Note to Coordinator: This is already a challenging project, but if you wanted to go further, you could divide this into two teams - one building the graphical interface and one building the conversational interface. Managing multiple interfaces with one API is some next level stuff, so only choose this option if you have an abundance of very strong performers.

Good PR

Business problem

At Code Your Future, trainees use various tools like GitHub Projects for issue tracking, Slack for communication, and Google Meet for video calls. However, there is no centralized platform to visualize everyone' progress and activity on their final projects.

How can trainees and mentors track project progress, visualize GitHub activity, and ensure fair contribution from all team members in a single, purpose-built platform?

What is the simplest thing that could possibly work?

Proposed functionality

Project data integration

• Import project data: Team Name, Person, Role, Project Brief, Slack #channel, GitHub Username, GitHub Repo, GitHub Project Board, Deployed App, and Presentation

GitHub activity visualization

• Display project progress and team member contributions based on GitHub activity

• Generate graphs to visualize project progress and individual contributions

Fair contribution tracking

• Implement a function to calculate and monitor each team member's contribution percentage.

• Show alerts if contributions fall outside the acceptable range, prompting intervention

Centralized dashboard

• Combine data to provide a comprehensive view of project progress and team collaboration

These features should be supported by a PostGreSQL database and displayed by a React front end, which scores 100 for Accessibility on Lighthouse.

Users and roles

As a trainee, I want to track my contribution to the project and ensure that the team is working together effectively.

As a mentor, I want to monitor project progress and intervene when necessary to maintain a fair distribution of contributions among trainees.

As a project manager, I want to visualize the progress of multiple projects and identify any issues that require attention.

As a participant, I want to see the progress of teams over time..

Stretch goals

Automated alerts

• Send notifications to Slack or email when contributions fall outside the acceptable range

• Customizable visualization

• Allow users to customize the dashboard, selecting which data and visualizations are most relevant to their needs

Lighthouse CI

• Integrate Lighthouse testing into the deployment workflow

• Define GitHub actions and set budgets for Lighthouse scores

Things to consider:

Integrating with existing tools like GitHub requires understanding of their APIs and data formats. How can you ensure seamless integration while providing added value through visualization and fair contribution tracking?

There is already a spreadsheet that tracks this data, and it shows one way to pull the data you need from GitHub. Can you use this to help you? [TEMPLATE] Final Project - Tracker. The code is in the attached App Script.

Additional APIs and services to explore:

• More GitHub APIs for repository, commit, and project board data

• Slack API for sending alerts and notifications

[NOTE: a version of this project was built by trainees and adopted by CYF Products in Q3 2023]{.mark}

w

Hack Around the Clock

Business problem

At Code Your Future, we join hackathons and have a lot of fun learning and building together.

But we also find it hard to coordinate and we miss a lot of great opportunities.

How can we discover and participate in hackathons in an organised way?

Proposed functionality

• A way to consume listings

  • How will you consume multiple APIs? Is it better to start with one feed and then add a second?

  • How will you normalise the data into one standard event listing with the details a CYFer cares about?

  • What event schema already exist?

• A way to produce listings

  • How will you only show events that are still available?

  • How will your users sort and filter events to only show the ones that are right for them?

• A way to organise participation

  • How will people sign up for events?

  • How will you empower CYFers to organise a group to participate in events?

What is the simplest thing that can possibly work?

These events should be stored in a database and displayed by a front end which scores 100 for Accessibility on Lighthouse.

Users and roles

As a developer , I want to sign up for fun events to keep me motivated in my coding

As a mentor, I want to scan open listings and get a sense of the current opportunities

As a staff member, I want everyone to feel empowered to participate in the universe of coding events themselves, so I don't personally die of exhaustion trying to organise it all

Stretch goals

• Slack feed

  • Should new events post to Slack? Will you create a webhook?

• Filtering events

  • Can you filter the events to only things CYFers can realistically participate in? For example, how will you discard all in-person events in the USA from MLH lists? How will make sure everything is free?

• Google Calendar

Can you produce a google calendar of events that we can all subscribe to?

• Conferences

  • What about free conferences and meetups? Can your app handle those too? Should it?

Things to consider:

Most events are hackathons, but not all. How will you decide what to tell the user about each event?

There are many more events than anyone can or should participate in? How will you filter events to things we really want to do?

How do event aggregation APIs get their data? What is web scraping?

Who already organises a lot of events at CYF? Would they be a good person to advise you on your development?

Useful links

• https://hackathons.hackclub.com/data

• https://mlh.io/seasons/2024/events

• https://hacktoberfest.com/

• https://findingada.com/worldwide-events/

• https://24pullrequests.com/

• https://adventofcode.com/2022/events

• https://allevents.in/manchester/it

How to make a class (UX/FE)

Business problem

At Code Your Future, setting up a new class involves coordinating various elements like trainees, volunteers, resources, and more. There is no fun and intuitive way to understand and visualise what goes into "baking" a successful class.

☀️We like clarity. It's really important to us that everyone understands what they need to do to start a cohort at CYF.

How can cohort founders explore and experiment with different conditions to understand their options.

What is the simplest thing that can possibly work?

Proposed functionality

• A way to visualise requirements

  • Create a web-based game using SVG illustrated game pieces.

  • Central mixing bowl where "ingredients" for a class are poured in from containers set around the page.

  • A "baking" phase where optional elements like food and childcare can be added, each having a cost.

• A way to experiment with requirements

  • Dials and buttons could adjust ratios and tempo.

  • How will you set limits but still encourage autonomy?

This fun web game can be written in React, Web Components, or a framework of your choosing. You do not need to build a login or a database. The front end must score 100 for Accessibility and over 80 for Performance on Lighthouse.

Users and roles

As a prospective CYF organiser, I want to understand what elements are essential for setting up a new class and how they interact.

As a volunteer or staff, I want to express the complexities involved in forming a new class in an engaging way.

Stretch goals

• Live data feed integration

  • Nobody can start a new class if the previous cohort is still struggling to find work. How will you set a limit by region?

• Update constraints and ratios

  • As CYF evolves and we learn more about success and failure, we update the constraints. How will you allow administrators to update the values?

• Lighthouse CI

Can you integrate Lighthouse testing into your deployment workflow? Who will define the Github action? How will you decide what budget to set?

Things to consider:

How can the Change Board help you? https://github.com/CodeYourFuture/Changes

How can the Programme Team help you? https://github.com/CodeYourFuture/Programme

This is a serious interface challenge. Get as much help as you can from UX and FE mentors.

More details:

When to launch ITD > Fundamentals > SDC

CYF Guide - Launching a cohort

Understanding Scale at CYF

—------------------

Notes: 🎂Cake Your Future

What is the recipe to make a class?

🧑 We need how many trainees

🧑 We need how many volunteers

🏢 We need a place to meet

💻 We need laptops

🚌 We need a syllabus to understand what to do

🧑‍🏫 We need training to understand how to do it

Where do trainees come from? ITD => funnel of ITD applicants and change the completion rate with a dial?

Where do volunteers come from? => meetups, dashboard signups, graduates => what is the retention rate on these inflows?

Where do places to meet come from? Volunteer workplaces, company donations, local government support, community centres

Where do laptops come from? Donations from companies, personal donations, donated money to buy them

Where does broadband come from? Donations from companies, personal donations, donated money to buy them.

Where does training come from? Volunteers and staff donate their experience. Some staff used to be volunteers!

Where does the syllabus come from? FOSS on Github, sister orgs like HYF, donations from Udemy and Codility, individual contributors

What extras are most impactful? (the icing on the cake)

🍲 food

👶 childcare

🎫 bus tickets

What makes a class even better? (light the candles)

=> hackathons

=> workshops

=> lightning talks

=> games

Hub planner

Business problem

At Code Your Future, volunteers face extra challenges when coordinating remote and hybrid Saturday sessions. In the North West, for example, public transport is not reliable. Trainees could be in Manchester, Leeds or Liverpool. Some trainees may have to attend remotely due to train strikes, cancellations, breakdowns and floods!

Proposed functionality

• A way for trainees and volunteers to check travel disruptions in their region

• A way for everyone to register their attendance type

  • How can volunteers and trainees record their type of attendance? What sort of data will we need to store?

  • How can trainees provide a reason for their attendance? Is this useful?

  • What types of attendance are there? Remote, in person…. What else?

• A way to notify facilitators of where everyone will be before class

  • How might fellow volunteers or trainees notify others that there are travel issues in their hub?

  • How will users tell what day everyone is talking about? Will you use a calendar?

The attendance type data should be stored in a PostGreSQL database and displayed by a React front end,

Users and roles

Trainees

As a trainee, I want to check for local travel disruption in my region before a Saturday class

As a trainee, I want to register my type of attendance ahead of a Saturday class

As a trainee, I want to be able to quickly update my attendance type ahead of a Saturday class

Volunteers

As a volunteer, I want to check for local travel disruption in my region ahead of a Saturday class

As a volunteer, I want to register my type of attendance ahead of a Saturday class

As a volunteer, I want to view the attendance type of all the trainees and volunteers for a given Saturday class

As a volunteer, I want to be able to quickly update my attendance type.

As a volunteer, I want to be able to automatically sort trainees and volunteers into breakout groups based on their attendance data according to some clearly stated criteria, for example:

- Trainees attending a hub in-person, say Leeds, where at least one volunteer is present won’t need to go into a breakout room.\

• Trainees attending a hub in-person, say Leeds, where no volunteers are present will need to go into a breakout room.

- Trainees attending remotely will need to go into a breakout room

As a volunteer, I want to be able to override any breakout groups that are generated automatically.

Stretch goals

Pathways

The app can also handle a situation where a group of trainees are on several pathways and need to go into separate breakout rooms.

Class Planner integration

A previous Final Project built the Class Planner, which volunteers use to plan classes. https://classplanner.codeyourfuture.io/

How can the Hub Planner integrate with the Class Planner? Is it useful to do this? You might need to do some user research and talk to the Class Planner Product team.

Impact (Data)

Business problem

At CodeYourFuture, we use data to understand the impact of everything we do. We spend a lot of time diving into our data and tracing outcomes, and we use charts, graphs, and quantified impact statements in our pitch decks, grant applications, and regulated reporting.

But this is a ton of work; we repeat ourselves a lot, and we don't have a branded, organised way to explain these insights to others, including showing our working out and how we came to make these statements.

How can we explore, explain, store and share these insights in an organised way?

What is the simplest thing that can possibly work?

Proposed functionality

• A way to pull anonymised data from multiple sources

  • We have the live data feed

  • What other data sources do we use a lot?

• A way to interrogate data for the common questions we ask

  • Are there existing products we can use for this? What is simplest?

• A way to visualise data for the common questions we ask

  • Are there existing products we can use for this? What is simplest?

• A way to share impact data

  • Can we export CYF branded graphs and visuals?

  • Can we embed impact statements on Google Slides or websites?

This application could be full stack or front end. It is data focused. The front end must score 100 for Accessibility on Lighthouse.

Users and roles

As a CYF grant writer, I want to make clear, fact-based statements about our impact..

As a grant maker, I want to see the methodology for impact statements so I can verify them.

As a CYF data contributor (trainees and alum), I want to know that my data is being used correctly to support CYF's work and future trainees.

As a CYF member, I want to be able to talk about CYF's work with strong facts I can find and share easily.

As a regulator, I want to make sure Personally Identifying Information is not shared and all data is anonymised before store.

Stretch goals

Admin view

• This product uses open data sets. CYF also has some private data sets, which cannot be connected publicly. What would you need to do to make this application secure for this data? Is it wise to do this? What are the implications?

User Research

• Speak to staff about how they use data to help support CYF and what kinds of impact statements would help them most.

Things to Consider

Don't get overcomplicated. Start with a single data point comparison between two data sources. Use existing products to help you. Identify and build the missing piece for this use case.

💹RAWGraphs

📌 CYF Data feed is pinned in general : CYF DATA Feed [LIVE]

Common datasets we compare against:

• https://www.nomisweb.co.uk/datasets/asher

• https://imd-by-postcode.opendatacommunities.org/imd/2019

• https://ifs.org.uk/tools_and_resources/where_do_you_fit_in

• https://stats.oecd.org/Index.aspx?DataSetCode=HSL

Here are some examples of CYF use of trainee data

• Anonymised and aggregated reporting, which you can see hereCYF DATA Feed [LIVE]

• Here's an example of slides we show to partners:CYF corporate volunteering [LIVE]

• Here's an example of a report prepared for OfstedSelf Assessment Report (SAR) 26-1-23 [PUBLIC]

In A Class of Our Own

Business problem

At Code Your Future, trainee progress is tracked on a trainee tracker against milestones set by the Director of Education. But each trainee at CYF is on their own personal journey towards employment, and should really set their own milestones on their own roadmap.

Proposed functionality

• A way to define your milestones

  • How will you quantify your milestones? The trainee tracker code is available for you to incorporate as your starting point.

• A way to check your milestones

  • Course milestone data is harvested from platform APIs (Codewars, Github, etc) and this code is available to you on request. What other goals might trainees set?

• A way to display your progress over time

  • You’ll probably need a user account and some kind of dashboard.

Your solution should be stored in a database and displayed by a front end which scores 100 for Accessibility on Lighthouse.

Users and roles

As a trainee at Code Your Future, I want to set my own milestones for the course.

As a trainee at Code Your Future, I want to see and track progress towards my own milestones, as well as the ones set by the course.

As a mentor at CYF, I want to support each person as an individual towards their own career goal.

As a Programme Manager, I want to include trainee-chosen milestones in my evaluation of progress.

As an Education Director, I want to support each person as an individual towards their own career goal, while being able to get a reasonable overview of how our cohorts are doing.

What else do users want? How will you find out? Some user research may be needed. Remember: Do the simplest thing that could possibly work.

Stretch goals

• Public API

  • To allow other services to pull the progress data, can you build a public API. The Attendance Register project has this goal; can you share your work?

• Lighthouse CI

Can you integrate Lighthouse testing into your deployment workflow? Who will define the Github action? How will you decide what budget to set?

Notes

There is an existing tracker that harvests this data and quantifies it here https://docs.google.com/spreadsheets/d/1VoSIXo1M8RYFH8CexyAeDk2KrdxXpY6hDUmS1Ae_WMU/

Jobs from the boards

Business problem

At Code Your Future, graduates trawl job boards and gather leads as part of their Employment Programme. Graduates use Slack channels and calls to share their leads and progress with applications.

But we also duplicate a lot of effort, and job hunting is exhausting enough already.

How can trainees discover and apply for jobs in an organised way?

Proposed functionality

• A way to consume listings

  • How will you consume multiple APIs? Is it better to start with one feed and then add a second?

  • How will you normalise the data into one standard job listing with the details a CYF grad cares about?

  • What job schema already exist?

• A way to produce listings

  • How will you only show jobs that are still available?

  • How will your users sort and filter jobs to only the show the ones that are right for them?

• A way to analyse jobs

  • Is it valuable to know which employers have already hired a CYFer?

  • Is it useful to identify keywords and highlight them in the listing?

  • What about salary ranges; is this key data for users? How will you find out?

These jobs should be stored in a PostGreSQL database and displayed by a React front end which scores 100 for Accessibility on Lighthouse.

Users and roles

As an applicant for junior developer roles, I want to browse and filter jobs that I have a chance of getting

As a mentor, I want to scan open listings and get a sense of the current market for my trainees.

As a staff member, I want everyone to share their leads and work together so we don’t get too broken down by job hunting..

Stretch goals

• Slack feed

  • Should new listings post to Slack? Will you create a webhook?

• Keyword scanning

  • Can you produce a dictionary of important keywords that CYF applicants would want highlighted? What user research will you do to identify these words?

• Lighthouse CI

Can you integrate Lighthouse testing into your deployment workflow? Who will define the Github action? How will you decide what budget to set?

Things to consider:

There are enterprise solutions to this problem, like Google Cloud Talent Solution. What are the advantages and disadvantages to building your own?

There are many paid job aggregation APIs, but there are also some free ones. How do these job aggregation APIs get their data? What is web scraping?

Some free Job Board APIs

• Arbeitnow

• https://devitjobs.uk/job_feed.xml

• https://developer.indeed.com/

• https://github.com/jobapis/jobs-authenticjobs

• https://github.com/public-apis/public-apis?source=post_page-----86a4ff3a2742--------------------------------#jobs

Knowledge Checklist

Business problem

At CodeYourFuture, our students gain a vast amount of knowledge and skills that in total, will result in them being able to call themselves a programmer.

It’s important that we can track a student's progress over the course to make sure that they are keeping up with the class and developing their understanding of our material.

Proposed functionality

The website should be able to have a list of skills that students are expected to achieve. For each item in this list we should be able to rank the students’ confidence with the skill.

Skills should be separated into categories depending on what they are about e.g. HTML/CSS, React, Node etc

Students should be able to create an account to track their progress over the course. These accounts should be publicly accessible on a path on the website e.g. cyf-knowledge-checklist/august but individual information cannot be accessed without authentication.

Each student should be attached to a class.

All data should be stored in a database using an API to interface with it.

Users and roles

As a student, I want to be able to create an account that will hold all of my knowledge checklist data.

As a student, I want to be able to update and chart my own progress

As a mentor, I want to be able to edit the class learning objectives in each of the subjects.(this should only be possible before a cohort starts - see stretch goals)

As a mentor, I want to be able to see an overview of all of the students in a given class.

Likely challenges

• Be careful how you structure your data as this could get confusing quickly

Existing Systems

Here is a very simple example of this system created by CodeYourFuture

https://cyf-course-checklist.netlify.app/

The success view on the curriculum aggregates learning objectives into a checklist.

Stretch goals

• Resources & Assessment

  • If a student says they are not confident in a subject show them a set of resources to help them

  • If a student says they are are confident in a subject, direct them to complete an assessment piece of work

  • As an admin, I want to be able to edit the resources and assessment for each topic

• User Research

  • Speak to your classmates about what features they’d like to use. Select a sensible feature and build it.

  • Speak to your teachers and mentors to see what features they’d like to use in the app. Select a sensible feature and build it.

• Dark mode / toggling modes (accessibility)

  • As any kind of user, I would like to be able to toggle my preference to use dark mode

  • If possible, as a user, I would like other options for the colours used on the background and text

• Prevent editing of learning objectives after a class starts

  • As a mentor, I should not be able to edit the list of learning requirements once a class has started

Like Sands

Business problem

At Code Your Future, we try to save money as much as possible, so we can do the most with our limited funds. But sometimes it's hard to perceive the costs of our decisions and allocate our resources wisely.. For example, if five people spend one hour deciding whether to buy one software licence, it might actually be cheaper just to buy the software instead of having the meeting.

How can we better understand the value of our time? How can we help each other to not waste precious resources that could go towards trainee expenses or infrastructure improvements.

What is the simplest thing that could possibly work?

Proposed functionality

Poll salaries

Privately poll each meeting attendee for their annual salary

Do not permanently store or visually display this personal information

Calculate cost

Combine the salaries and compute the cost per second of the combined time of the attendees

Display cost clock

Display a cost per second ticking up in the Google Meet call

Users and roles

As a staff member, I want to visualise the cost of discussing resource allocation

As a donor, I want to know CYF rigorously examines its own use of funds

Stretch goals

• Can this extension integrate with Google Calendar and project the cost of proposed future meetings as well?

• It costs a company much more than the annual salary to employ someone; can you include those costs as well? Or a rough percentage?

• Could an attendee also input the cost of the resource being discussed, if any, so if the cost of the meeting surpasses the cost of the resource, the attendees are notified?

Things to consider

If there are only two people in the meeting, each party can deduce the annual salary of the other. Is this a problem? How will you tackle this? Can CYF provide a blended employee cost per second default value that is used instead in this scenario?

http://www.expensivemeeting.com/ is a longstanding website that does a basic version of this idea. What can you learn from it?

Agencies and contractors must calculate their costs in this way to understand how much to bid for work. What can you learn from applications like Synergist, and what is "overkill" for your product?

Logistical Lunch

Business problem

At CodeYourFuture, we are used to meeting on Zoom for every occasion, as we are living through a global pandemic.

But now we need to adapt to meeting together in person every weekend. We need to figure out our travel arrangements and, most importantly, what we will do for lunch!

This project is about systematising the management of the flow of things and people, according to complex and sometimes competing requirements: logistics.

Proposed functionality

Phase 1:

Optimal starting time.

Using the group’s starting positions and chosen mode of transport, evaluate a distance matrix to pick the optimal start time in the morning.

Phase 2:

Organise lunch

Create an interface to gather and display the answers to, at least, these questions:

1. How many people will need lunch today?

2. Who is in charge of making lunch today?

3. Who is in charge of buying the ingredients today?

4. What is the budget?

5. What are the dietary restrictions that must be considered?

6. Where is the nearest supermarket?

Users and roles

As a class organiser I want to coordinate the morning start time with all the trainees.

As a lunch shopper, I want to know what to buy and how much to spend.

As a lunch maker, I want to know what to make and for how many people.

As a lunch eater, I want to make sure that I don’t die from a terrifying anaphylaxis.

Likely challenges

• How will you calculate the distance matrix?

• Do you need user accounts to solve these logistical problems?

• How will you keep the origin coordinates of individual students a secret? Do you need to associate identities and origins at all?

Existing Systems

• Can you use the Google Maps Distance Matrix API or the Distance Matrix to calculate the distance matrix?

• What do you know about the https://classplanner.codeyourfuture.io/

Stretch goals

• Integrate

  • As a class organiser, I’d like to access this logistics app from the Class Planner

• Lunch assistant

As a lunch maker, I’d like suggested recipes from a database of successful class lunches.

As a lunch shopper, I’d like a suggested shopping list.

As an organiser, I’d like for the lunch maker and shopper to be selected on a rota.

• Afternoon break

A substantial stretch feature could extend this product to negotiating the afternoon break schedule as well. Some starting user stories are provided to help you think about this feature.

As a Muslim, I need to schedule an afternoon break for prayers.
As a breastfeeding mother, I need to schedule an afternoon break to feed my baby.
As a disabled person, I need to schedule an afternoon break to manage my medication.

Love me Tender

Business problem

At Code Your Future, there are various opportunities for contract software development work. However, there is no centralised platform to publish these tenders and allow qualified suppliers to bid on them.

We like fairness and opportunity. It's really important to us that everyone has the same fair chance to bid for contracts.

How can trainees discover and bid for contracts in an organised way?

What is the simplest thing that can possibly work?

Proposed functionality

• A way to publish tenders

  • How can staff easily describe their business problems

  • What details will be included in a tender listing? Scope, deadline, skills required, etc.

  • How will you structure fairness into the process?

• A way to browse tenders

  • How will you only show jobs that are still available?

  • How will your users sort and filter jobs to only show the ones that are right for them?

• A way to bid on tenders

  • How will contractors bid on available tenders? Will you build a UI for them to submit their proposals?

  • How will you ensure only available tenders are shown? Will you implement a status flag in the database?

These tenders should be stored in a database and displayed by a front end which scores 100 for Accessibility on Lighthouse.

Users and roles

As a CYF staff member, I want to easily publish and review tenders to efficiently match projects with contractors.

As a contractor, I want to find available tenders and have the opportunity to bid for them

As a contractor, I want the tendering process to be useful training for me, even if I don’t win the contract

As a mentor, I want to have an overview of the tenders to provide guidance to aspiring contractors within the CYF community.

Stretch goals

• Slack feed

  • Should new listings post to Slack? Will you create a webhook?

• Keyword highlighting and filtering

  • Can essential skills or technologies be highlighted in the tender UI?

• Lighthouse CI

Can you integrate Lighthouse testing into your deployment workflow?

Who will define the Github action? How will you decide what budget to set?

Things to consider:

There are enterprise solutions to this problem. What are the advantages and disadvantages to building your own? There are also many Open Source tendering platforms. What can you learn from them?

How can the Contracts Finder Service and Find Tender Service help you? Can you make use of their FOSS API? (Also see V2)

How can the Change Board help you? https://github.com/CodeYourFuture/Changes

CYF would really like to adopt this project, if a build can meet our needs. Consider the Technology Code Of Practice to help you understand how to get your project up to a production standard. We want the simplest version we can possibly use.

Project Bolan (FE)

Business problem

Using Chrome, if you try to access a website while offline you can play a game. Alternatively you can access the game by navigating to chrome://dino in the URL bar. More info can be found on Wikipedia.

The game is a fun Easter Egg when the user might be frustrated at the lack of internet connection. It may be a fun thing to add to your apps in the future to add some light relief.

What is the simplest thing that could possibly work?

Proposed functionality

• You play a dinosaur who is running to the right of the screen

• As you play, various obstacles appear on the right that the dinosaur must avoid, either by jumping over them (by pressing the Up Arrow or Space keys) or crouching under them (by pressing the Down Arrow)

• The dino runs faster (and thus the obstacles also move faster) over time

• A score counts up over time

Users and roles

As a player, I want the dino to move to the right when playing the game.

As a player, I want randomised obstacles to move to the left when playing the game.

As a player, I want to control the dino jumping/crouching via the keyboard.

As a player, I want a score to be recorded.

As a player, I want the dino to speed up over time.

Stretch goals

• A high score is recorded for the player

• Instead of a dino, make a custom CYF character

Things to consider

When implementing the game, try looking at requestAnimationFrame.

Q&A Site

Business problem

It’s very common for students (and sometimes mentors!) to have technical issues running their code - errors, unexpected outputs, or refusing to run entirely. The Technical Question Form (see the ⚡️ icon in e.g. #london-class6) has a good structure but asking questions like this in Slack is difficult for a number of reasons, e.g. it doesn’t handle (and format) code very well and threads disappear quickly. Stack Overflow has a very mature UI for asking code-related questions, but asking there is a big step; it’s not really designed for beginners and the comments don’t provide enough space for a complex back-and-forth. We could bridge the gap with a Q&A system of our own, which would hopefully improve the quality of questions, both getting better answers now and preparing students for a better entry to asking on Stack Overflow.

Proposed functionality

The key functionality would be a way for the asker to post and subsequently edit a question, comprising an explanation of the context (why the code is being written, e.g. linking to a class or homework), the expected outcome, the actual outcome and the (HTML, CSS, JS) code. A question could then have responses: follow-up questions, to give feedback and clarify what is being asked; and answers.

Users and roles

The primary roles in the system will be people asking questions, and people responding to them with follow-up questions and answers.

Likely challenges

How can we develop a structured format that encourages clear, high-quality questions? How do we encourage good feedback and refinement of questions? How do we manage different types of content (text vs. code, and different kinds of code for formatting)? There can end up being a lot of data in a system like this, how can we create a system that scales efficiently to deal with that (e.g. showing “pages” of data)?

Stretch goals

Some form of notification for key events (e.g. answer posted) via Slack or email would mean users didn’t need to keep checking back for responses. Being able to create a question straight from Slack using the existing form would be pretty cool! What if you could run the code examples (for client-side things, Express and Mongo might be tricky…) right in your browser while looking at the question?

QR Code Scanner

Business problem

QR codes are a common sight nowadays, as they can easily integrate the physical world (such as museums, cafes, restaurants) with the digital world.

Let’s imagine we’re building a website for a museum which wants to allow museum attendees to scan QR codes next to exhibits to see more information.

What is the simplest thing that could possibly work?

Proposed functionality

• Allow users to take a photo of a QR code and add it to an image element on the application

• Use the BarcodeDetector API to scan the QR code

• Display the information contained within the QR code

Users and roles

As a museum attendee, I want to learn more information about an exhibit.

Stretch goals

• Allow the user to directly scan QR codes with their camera (rather than taking a photo then processing it)

Things to consider

A QR code generator like this one may be useful for testing.

Unfortunately, the BarcodeDetection API does not have very good browser support yet, as it is only fully supported by Chrome on Android. You may want to consider showing a warning message to the user if it is not supported.

Quiz App

Business problem

With a large group of students it’s difficult to track how everyone is doing with the material; we move quite quickly through the course at CYF, and a student can sometimes fall behind without the mentors realising. We’ve had quizzes at the end of some of the modules, but these take a lot of effort to prepare and mark, and the earlier we understand a student’s position the more support we can provide.

We’ve been experimenting with Kahoot! for this in London, running quizzes at the end of classes to figure out how people are getting along with the material. However, Kahoot! isn’t free, it prioritises being fast (which can put unhelpful pressure on students) and it would be nice to have a system that we could integrate more closely with the other tools we’re using.

Proposed functionality

Similar to Kahoot!, the quiz app will allow a lead mentor to prepare simple quizzes to give throughout the modules (e.g. one before lunch and one at the end of the day). It will then allow them to present the quiz to a class and enable the participants to answer the questions.

Users and roles

There’ll be three kinds of user for this: the lead mentor preparing the quiz; the students (and maybe floating mentors!) taking part in the quiz on the day; and the other mentors reviewing the results to try to spot patterns and offer additional support (or suggest improvements to the course material and teaching) where required.

Likely challenges

This app will probably have lots of different views - on top of the “preparing quiz” and “reviewing results” views, the on-the-day usage will have distinct UIs for the participants’ devices (answering the question), the lead mentor (tracking participation) and the projector (showing the question). How can we show different kinds of question? How would e.g. code examples and pictures work out? How can we help the lead mentor preview their questions, and get them reviewed (so they don’t make the students go through a quiz with mistakes)? How do we make this accessible so that any user can take part (e.g. responsive design, keyboard usage, …)? Can we usefully categorise questions, or set estimated difficulty, to give more insight into class progress?

Stretch goals

• Interactivity: you can build a simple app with a request/response pattern and polling, but to make the app more interactive (e.g. scores in real time) you’d have to look into something like websockets

• Analysis: initially you could just allow export of the data for import to Google Sheets for further analysis, but what if there were tables and charts available directly in the tool?

• Scoring: a simple version of this app would just store the participants’ answers, but if you wanted to add a competitive element you could develop a scoring system.

Radio Free YF

[Note: this challenging project requires significant up front research on API restrictions]{.mark}

Business problem

At Code Your Future, we like to dance, we like to share our music, and we like to stream coding music while we work. But we don't have our own radio station to share and discover music that resonates with the community.

What is the simplest thing that could possibly work?

Proposed functionality

Spotify integration

A way to pull playlists from multiple Spotifys

• How will people submit their playlists? Will the API let you do this or will you use Slack?

• Who decides what gets played? Anyone?

Visualisations

A way to display the current song playing

• Can you generate a waveform and animate it?

• Can you pull the cover from the API and show it?

• What about the current 'DJ'? How will you represent the CYFer playing the track

Memory

Do we need a way to browse the tracks already played?

• Can you put 'sets' on a calendar?

• Will you make the past tracks searchable? There are restrictions on storing data in the Spotify Developer Agreement.

These features should be supported by a PostGreSQL database and displayed by a React front end, which scores 100 for Accessibility on Lighthouse.

Users and roles

As a CYF musician, I want to share my music

As a CYFer, I want to share my music

As a CYF musician, I want to share my music! 😂(I think some more detailed user stories would be a good idea)

Stretch goals

Lighthouse CI

• Integrate Lighthouse testing into the deployment workflow

• Define GitHub actions and set budgets for Lighthouse scores

Slack bot

• Post the current playlist to Slack

• Ask /tunes what is playing on CYF Radio

Things to consider:

There is another Spotify API project, which may be approachable if you're on a short deadline: Team Project: Spotify Playlist Filterer

There is a cyf music channel. Can you recruit user testers from this group? What other things would they like from this application?

The Spotify API is free but has a lot of restrictions and is only for personal or development use. What can you NOT do that you would like to?

This project suggests Spotify, but you can choose your own solution if Spotify doesn't work for you. Remember to do the simplest thing that can possibly work.

Readme Hireme

Business problem

At Code Your Future, we need to showcase the talents and skills of graduates who are available for work. Currently, there is no centralised, up-to-date platform for this. We could ask them to update one, but our graduates are tired, and very busy coding! So is there a way to harvest that activity and use it to power a graduate directory automatically?

What is the simplest thing that could possibly work?

Proposed functionality

GitHub API integrations

A way to pull data from GitHub

• Use GitHub Activity API to fetch each graduate's contributions, projects, and skills.

• Use GitHub Profile README to extract personal statements, resumes and LinkedIn

• Use GitHub pinnedItems API (GraphQL) to extract projects and portfolio

• How will you add and remove grads from the platform? Should grads do it themselves via a GitHub login?

Visualisations

A way to display data

• Can you generate graphs to visualise activity?

• How will you present each grad's profile?

Search and browse

A way to search and browse for grads

• How will you sort up active graduates?

• How will you only show people available for work?

These features should be supported by a PostGreSQL database and displayed by a React front end, which scores 100 for Accessibility on Lighthouse.

Users and roles

As a graduate, I want to be able to focus on coding great projects and know my work is discoverable

As a mentor, I want to see at a glance who is active and who is losing motivation

As a recruiter, I want to see a range of CYF grads at a glance, and search and filter them too for my needs

As an employer, I want to easily find suitable CYF graduates so that I can hire skilled developers.

As a mentor, I want to make sure CYF grads spend their time on things that will genuinely help them get jobs

Stretch goals

Lighthouse CI

• Integrate Lighthouse testing into the deployment workflow

• Define GitHub actions and set budgets for Lighthouse scores

Things to consider:

This app should look really smooth, because we're presenting ourselves to recruiters. Can you recruit a UX/UI designer or front end specialist to polish up your look? Where will you find these people?

Integrating with existing tools like GitHub requires understanding of their APIs and data formats. How will you test your approach using the smallest slice of end to end functionality you can first?

There are already multiple small apps and scripts in use at CYF that pull from various GitHub APIs. Can you use these to help you?

Previously there was a project Team Project Graduate Platform [RETIRED] which several teams built, but we never integrated or updated. Make sure your solution is lightweight, easy to maintain, and does not rely on manual input of data.

Pin the Mood

Business problem

People recommend things (books, TV shows, music, etc). Sometimes we don't get around to trying them out for a while. We want a website to track those recommendations, and to help us pick things when we're in the right mood for them.

User roles

We will make a single-user website, with exactly one expected user:

• Collector - someone who receives recommendations, and wants to log and track them.

User stories

• As a collector, I can save a recommendation, including at least the following information:

  • What the thing being recommended is

  • Who made the recommendation

  • What medium of the recommendation is (e.g. book, TV show, movie, …)

  • The mood of the recommendation (e.g. upbeat / scary / thoughtful / …)

    • One recommendation may have multiple moods!

• As a collector, I can see a list of recommendations that have been made.

• As a collector, I can filter the recommendations based on any combination of:

  • Who made the recommendation

  • The medium of the recommendation

  • The mood of the recommendation

Stretch User Stories

• Ability to add custom recommendation media (e.g. if someone recommends an "immersive theatre" event, that can be entered as a new medium when saving)

• Ability to add extra moods

• Ability to rate recommendations

  • Analytics about who makes the best recommendations

Table stakes

Unrelated to any one user story, the following requirements must always be met:

• The website must be deployed somewhere where it's accessible to anyone with internet access.

• The website must be fully accessible.

• If an error occurs, it must be obvious to the user that something has gone wrong, and what they should do about it.

• Any data must be persisted - re-deploying or re-starting the server must not lose any data.

Suggested implementation plan

High Level

1. Talk through what functionality should live where.

2. For all of the user stories you're likely to target:

   a. Sketch out some wire-frames to map out the user experience.

   i.  Wireframes can be as extensive or detailed as you want. It
       could range from a simple pen paper design to a detailed
       figma design; whichever suits your needs better.
   
   ii. You can always add more detail when you\'re focusing on any
       one user story.
   

   b. Model the data in database tables.

3. Make your frontend, backend, and database work both locally and deployed - you should be able to switch between these just by setting up a .env file.

4. Choose some user stories to focus on first, and:

   a. Write backend features which you can test out with curl/postman.

   b. Add frontend features to visualise the data from the backend and interact with it.

   c. Deploy everything.

5. Iterate.

Day by day

Day 1 - Day 2 : Planning phase (no coding if you can resist) -

Might seem long and an overkill but will benefit you at next steps. Key steps to complete (you pick the order):

• Design the DB for your business problem.

• Pick a feature that you want to focus on.

• Identify different pages / views required for the selected feature. Design Wireframes.

• Identify the API endpoints the feature would require.

• If time left complete the basic setup - setup a react app, express server & connect them with each other. Note - You can test with a simple endpoint if the frontend and backend are connected.

Day 3 - Day 4 - It's a choice you can start from the front end / back end.

Backend

1. Create DB and tables.

2. Basic app structure, setup of the express routes, skeleton only. Just routes with simple console.logs.

3. Implement the full logic of the route including db calls - test with PostMan/curl.

4. Implement the front end that calls these api endpoints / routes.

5. Go back to step 2 of this section & iterate.

Frontend

1. Implement the front-end view.

2. Use dummy data to style it.

3. Once happy with the layout, implement backend endpoints and replace dummy data with fetch statements.

4. Go back to step 1 of this section & iterate.

Day 5 onwards

Iterate.

STAR

Business problem

At CodeYourFuture, trainees keep a brag diary to build up a bank of examples of their skills, knowledge and capabilities. They need these examples for interviews.

Everyone does this differently. But really everyone should record these in the format they need for interview: STAR.

STAR means Situation, Task, Action, Result.

How can trainees record, review, and recall these examples in an organised way?

Proposed functionality

• A user account for each trainee.

• A way to record examples in the STAR format

  • Can this be a template?

  • Should this be a conversational form?

• A way to review examples

  • Can a view show many entries together so users can browse their diaries

  • Can users link or share an entry with a mentor if they choose?

• A way to recall examples

  • Can entries be searchable, perhaps using a free Algolia React plugin?

  • Can we record and show the date of the event/experience happened, instead of the date the entry was made on the website

  • Can we tag entries? Is that useful?

As the trainee completes the course, a constellation of STAR answers are accumulated.

These answers should be stored in a PostGreSQL database and displayed by a React front end.

Users and roles

As a student, I want to be able to create an online diary that holds all of my STAR based entries.

As a student, I want to be able to return and update and improve my entries as well as answer general interview questions using them.

As a TA, I want to know that trainees are regularly adding to their STAR accounts and even suggest to them ‘hey, you solved that, or helped - add it to your STAR account’.

As a PD mentor, I want to be able to discuss their examples and help them elaborate and celebrate both their CYF and non-CYF STAR examples.

Stretch goals

• User adaptability

  • A trainee can select and answer a particular interview question listed.

  • A STAR entry can be compiled and shared by a trainee , either with others or to a document.

• User Research

  • Speak to trainees about what extras would help them write their STAR entries - prompts or questions?

  • Speak to PD mentors and past students to ask how many examples should trainees be aiming to provide - or how many skills do they suggest to demonstrate (and which ones)?

Scout Activity Scheduler

Business problem

One of the volunteers (Ali Smith) also helps out with a group of Scouts who plan an international expedition to the Swiss Alps every 5 years. Since this is a big (and expensive) trip, the organisers offer each individual Scout the choice of 3 activities that they would like to do.

Once the activity choices have been submitted, the organisers produce groups for each of the activities. These groups are then added to a daily schedule, fitting around some activities that the whole group will do together.

The schedule has the following constraints:

• Groups can be configured to either fill 1 day or 2 days on the schedule

• All of the groups are added to the schedule at some point during the trip

• No individual Scout is doing two activities on the same day

• It is allowed for an individual Scout to not be assigned to a group on each day. An activity will be created for them to do on that day

In the past, this planning has been done by writing out the groups on pieces of paper and moving them around until a suitable schedule is found. However, this requires a lot of manual checking, so producing the schedule more easily in software is desirable.

What is the simplest thing that could possibly work?

Proposed functionality

Users and roles

As a trip organiser, I want to generate a schedule that meets all of the constraints listed above.

As a trip organiser, I want to generate multiple schedules that can be chosen from based on other “non-computable” properties (e.g. avoiding schedules that “too tiring” for individual Scouts)

Stretch goals

• ?

Things to consider

Ali Smith is happy to be consulted on the requirements.

Ideally the app should be working (and verified) by the end of January 2024.

Shared Bookmarks

Business problem

As developers, we spend a lot of time reading articles on the web and we often want to record useful links to come back to them later. It is fun to share your bookmarks with others so that they can find interesting and useful links too.

Here are some examples of bookmark sites:

• Jeremy Keith

• Andy Baio

• Ali Smith

What is the simplest thing that could possibly work?

Proposed functionality

• Display a list of links stored as JSON files within the repo

  • Each JSON file contains the URL, title and a description of the link

Users and roles

As a developer, I want to share a list of interesting/useful links that I’ve found.

Stretch goals

• Allow a user to search the links

• Switch from storing the links as JSON files to a database. To do this securely, this may require supporting authentication

  • Suggested approach: design the authentication so that only 1 user is supported. You can then fake “registering” this 1 user behind the scenes and save the password so that only 1 person can log in

• Allow other developers to subscribe to updates by supporting RSS

Things to consider

<DESCRIPTION OF OTHER THINGS TO CONSIDER>

Slack dashboard

Business problem

Slack is the main forum for communication between all of the members of the CYF family during the week; there are a lot of messages and calls going back and forth between various groups and channels. It allows us to provide mentoring during the week, even though we’re only able to get together as a whole group on Sundays, and is a core part of the CYF social network.

However, this extensive communication means it’s sometimes difficult to keep track of who’s been talking and how much. This means that we can miss out on when a trainee has stopped communicating, which can be a signal that they need further support. Communication is one of the key soft skills we’re encouraging, too, and we want to be able to evaluate how trainees are doing at this.

Proposed functionality

To help trainees and mentors understand communication levels in each city, this application will create a dashboard to view statistics of Slack usage for each week of the course. To encourage trainees to be proactively communicating their progress with the rest of the group, the mentors will be able to set individual and class targets.

Priorities

1. Aggregated Communication stats (messages and calls) of certain number of trainees in a given Slack channel over a period of time /mentor

2. Ability to create different cohorts based on a region, list of trainees and a number of Slack channels /mentor

3. A unique trainee profile that summarises their personal stats per week and overall

Users and roles

Both trainees and mentors will be able to see information about the levels of communication in class and city channels (although the trainees’ view will only show their detailed data). Additionally, mentors will have an administrative role, setting individual and class targets for number of messages and number or duration of calls.

Likely challenges

Building this application would require integration with the Slack API pretty early on (you can build some dashboards with canned data to prove out the UI, but we want this whole process to be as automated as possible). The data itself can be pretty boring, so how do you make it fun to use, could you try some kind of gamification? How does this align with trainees’ incentives and drive the behaviour we’re actually trying to encourage (we don’t want people posting “asdf” just to get their numbers up, for example - how do we encourage quantity and quality)?

Stretch goals

• Notifications: can we prompt trainees to hop back into the channel if they’ve been away? What if it’s for a reason? Can they snooze these messages and/or be prompted to contact a mentor?

• Integrations: how can we get this Slack data into e.g. Google Sheets along with the other information we have about trainees' progress?

SpaCy Aliens

THIS PROJECT COULD INVOLVE SOME PYTHON

Business problem

At Code Your Future, trainees are often learning many languages at the same time, and English is just one of them. During class and in study sessions, we get lots of practice with English but during the week sometimes we need a buddy, especially to practise professional scenarios like job interviews, code reviews, and demos. Most English support available does not support trainees with highly technical conversations, and hardly any can translate technical concepts from a different language we already know.

How can trainees practise business English with a tech focus in a single, purpose-built platform? Can they use a chatbot that converses with users in their target language, providing corrections, explanations, and relevant vocabulary based on the context of the conversation.

What is the simplest thing that could possibly work?

Proposed functionality

Contextual Learning Engine

• Detect conversation topics and suggest relevant vocabulary and phrases.

• Use NLP to correct syntax and grammar mistakes in real-time.

Daily Scenario Simulations

• Simulate common daily scenarios like responding to code review, asking for help with blockers, analogising technical concepts, etc.

• Create a specific prompt for practising Technical Interviews

Users and roles

As a language learner I want to practice English in a real-world context

As a part-time learner I want to practice English on my own schedule

As a mentor I want to suggest realistic scenarios for my students to practice English

Stretch goals

• UX: Create a logged in area to track progress

• QE: Integrate Lighthouse testing into the deployment workflow

• Cloud: Define GitHub actions and set budgets for Lighthouse scores

• AI: Integrate voice recognition

Things to consider:

• The back end can be a REST API and the front end a single-page app, which scores 100 for Accessibility on Lighthouse.

• Consider running spaCy in the browser using WebAssembly.

• Consider the tradeoffs of using ChatGPT vs spaCY and pick the simplest thing that can possibly work

• This is a challenging project suitable for grads and high-performing trainees

• Look at Tip of Our Tongues for ideas from a related project

• Chat GPT Prompts for Technical English Conversation

• Conversational · spaCy Universe

• Flask

• spacy-wasm · spaCy Universe

Study Buddies

Business problem

At Code Your Future, trainees form study groups to work together during the week.

It’s very complicated to arrange this as everybody has different schedules. Some trainees work nights, others look after their children during the day; some trainees work zero hour or gig jobs and their availability changes all the time.

Everybody’s schedule is different, but many people’s schedules are complimentary. If we could all put our availability in one sorting system, an application could tell us who has matching availability.

How can trainees discover and connect with study partners in an organised way?

Proposed functionality

• A way to enter your availability

  • How will you define availability and time?

  • What is the minimum and maximum amount of time to make available for a useful study group?

  • Can users connect their Google calendars to enter availability? And is this MVP?

• A way to match with other trainees

  • How will you only show trainees with overlapping availability?

  • How will users book this time; is there a maximum number of trainees that is useful to form a study group?

  • Should everyone in class be matched and grouped at once, or should trainees do this ad hoc?

These availability ranges should be stored in a PostGreSQL database and displayed by a React front end which scores 100 for Accessibility on Lighthouse.

Users and roles

As a trainee at Code Your Future, I want to form study groups with people who are available without constantly negotiating with 30 people.

What else do trainees want? How will you find out? Some user research may be needed.

Stretch goals

• Jack Jones

  • What happens when someone cannot match with anyone? How will you discover and communicate this situation to their cohort?

• Preference ranking

  • Sometimes we can be available if necessary, but it’s not very convenient. Could users rank their availability?

• Lighthouse CI

Can you integrate Lighthouse testing into your deployment workflow? Who will define the Github action? How will you decide what budget to set?

Tip of Our Tongues

Business problem

At Code Your Future, trainees and mentors collaborate and communicate with each other while working on projects. However, sometimes we face difficulty in phrasing our comments, questions, or feedback effectively, especially for those of us who are speaking English as an additional language.

How can we use APIs like DataMuse, Wordnik, and Grammarly to craft clearer and concise messages in English? How can we use speakable elements to check we are saying words clearly? How can we use technology to improve our communication skills and overall collaboration experience?

What is the simplest thing that could possibly work?

Proposed functionality

Input message

• Allow users to input their initial comment, question, or feedback

• Phrase suggestions

Evaluate message

• Use Grammarly, DataMuse, or Wordnik APIs to generate alternative phrasings, synonyms, or related terms

• Offer suggestions for more concise or clearer wording

Message refinement

• Users select and edit suggested phrasings to create a final version of their message

Speakable

• Allow users to hear the pronunciation of words or phrases in their messages

• Provide an option to adjust the speech rate and volume for better understanding

These features should be supported by a PostgreSQL database and displayed by a React front end, which scores 100 for Accessibility on Lighthouse.

Users and roles

As a CYF member, I want to improve my communication skills and ensure my comments, questions, and feedback are clear and concise in English.

As a project manager, I want to enhance the overall collaboration experience within Code Your Future, ensuring effective communication among all participants.

Stretch goals

Sentiment analysis

• Use sentiment analysis to ensure that the suggested phrasings convey a positive and supportive tone

Lighthouse CI

• Integrate Lighthouse testing into the deployment workflow

• Define GitHub actions and set budgets for Lighthouse scores

Things to consider:

Integrating with APIs like DataMuse, Wordnik, and Web Speech API requires understanding their features and limitations. How can you check the suggestions provided by these APIs are accurate and relevant?

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance

https://www.datamuse.com/api/

https://developer.wordnik.com/gettingstarted

https://developer.grammarly.com/docs/api/editor-sdk-react/

Important Note to Developers: This project could be highly challenging or could be a fairly simple React component . The real skill here is to start with the simplest thing that could possibly work.

If the groundwork is solid, this project could be adopted by CYF Labs, so get the fundamentals right first.

This App Ointment

Business problem

Outside of London, trains don't really work. It makes it really difficult to plan meetups as everyone is delayed all the time, sometimes for hours. It would be great to identify the most reliable place and time to meet for most people, based on actual train times not timetables.

How can we plot a meeting point between a group of people that is more reliable and minimises the chance of intolerable disruption, disappointment, and delay?

This project is all about data and insights. Be very very careful about your scope.

What is the simplest thing that could possibly work?

Proposed functionality

A way to enter locations

A way to join a meeting group

A way to identify an optimised location

A way to share the identified meeting location

A way to access everything on a phone (in transit)

Users and roles

As a community member, I want to look forward to in-person meetings instead of dreading them

As a community organiser, I want to arrange meetups people show up for!

As a tired and old person, I want to spend less time freezing on the platform at Manchester Victoria

Stretch goals

• Considering setting further parameters like:

• Maximum time each person is able to spend travelling

• Maximum price each person is able to spend on tickets

• Save favourite locations to groups

• Help users recommend places around train and bus stations that can host CYF groups (this could be an integration with Maps)

Things to consider

• Some people may not be able to share or publish their location; how will you protect privacy?

• There is an incredible website called Recent Train Times; what can you learn from it? https://www.recenttraintimes.co.uk/Home/About

• Can you use the Google Distance Matrix API to help you? https://developers.google.com/maps/documentation/distance-matrix/overview

Time Tracker

Business problem

At Code Your Future, we often have to balance multiple commitments and so need to use our time efficiently. To help understand how our time is being used, we could use a time tracker to track how much time has been spent on a particular task. This can then be visualised to understand where time could be used more efficiently.

What is the simplest thing that could possibly work?

Proposed functionality

Tracker

• Allow a user to input a description of a task and start a timer for that task

• The amount of time until the user clicks the stop button is recorded

  • This could be stored in the browser e.g. with localStorage

Visualisation

• A graph showing the amount of time each task has cumulatively taken over the whole day

• A graph showing the amount of time each task has cumulatively taken over the whole week

• See https://timeryapp.com/ for inspiration

Users and roles

As a trainee, I want to track how much time a task has taken over a period (e.g. a day or week) so that I can understand if the time could be used more efficiently

Stretch goals

• Use Toggl as a data store, see API docs

Things to consider

This is really just re-building Toggl. How could you put a spin on it? Can you find a way to report your data on your Coursework Planner? What insights could you send to your project board?

Remember, start with the minimum viable product and then iterate.

Eie.io

Business problem

A city farm has volunteers who look after its animals. Every day, one volunteer is needed every morning and every evening to feed the animals.

We need a website to ensure that every session has exactly one volunteer signed up.

User roles

• Manager - ultimately responsible for ensuring every time slot has a volunteer.

• Volunteer - can sign up for sessions.

User stories

• As a manager, I need to be able to see if any sessions don't have a volunteer signed up.

• As a manager, I need to be able to see the name, email, and phone number of the person who signed up to any session.

• As a volunteer, I need to be able to see what sessions are available to sign up to volunteer.

• As a volunteer, I need to be able to see what sessions I have signed up for.

• As a volunteer, I need to be able to claim an available session.

• As a volunteer, I need to be able to cancel a session I have already signed up for.

• As a manager, I need to be notified if someone cancels a session at short notice.

• As a volunteer, I don't want any other volunteer to know when I am volunteering, to protect my privacy.

Stretch User Stories

• As a volunteer, I get a notification (perhaps by email or SMS) to remind me about my session.

• As a manager, I can view statistics around how often each volunteer volunteers.

• As a volunteer, I can sign up to sessions on a schedule, e.g. "Every Monday morning".

• As a manager, I want to be able to email all upcoming volunteers with some information.

Table stakes

Unrelated to any one user story, the following requirements must always be met:

• The website must be deployed somewhere where it's accessible to anyone with internet access.

• The website must be fully accessible.

• If an error occurs, it must be obvious to the user that something has gone wrong, and what they should do about it.

• Any data must be persisted - re-deploying or re-starting the server must not lose any data.

Short-cuts we can take

• Let's not worry about log-in for now. We can just have a button/drop-down in the corner of the screen to switch between manager and volunteer roles.

Suggested implementation plan

1. Talk through what functionality should live where.

2. Sketch out some wire-frames to map out the user experience.

3. Model the data in database tables.

4. Choose some user stories to focus on first, and:

   a. Write backend features which you can test out with curl/postman.

   b. Add frontend features to visualise the data from the backend and interact with it.

   c. Deploy everything.

5. Iterate.

We are here

Business problem

It’s important for CYF to keep track of which students have attended which sessions and their behaviour during the class, for various reasons:

• Teaching: understanding of who was present for which material, so we can take that into account when assessing progress and planning catch-up activities, and seeing who needs special attention

• Finance: accurate payout of expenses for travel, etc.

• Pastoral: seeing when a student has missed multiple sessions, so we can investigate whether there’s a problem we could be helping them with

Volunteers currently take a manual register and then copy that to a spreadsheet by hand. This is not very reliable and it doesn’t give us as much information as we want.

Proposed functionality

Trainees clock into classes themselves. Attendance is logged to a class and a date (with start time), and this data is available as a public API from which the volunteers can pull the data they need. There is already a substantial amount of automated tracking by API for all the other milestones.

Volunteers can flag specific participation problems, and this information is also attached to the trainee object on the API.

Required Information

• Class name

• Class start time and date

• Trainee ID

• Trainee clock in timestamp (so punctuality can be computed)

• Mentor flags: LEFT EARLY, CAMERA OFF, LOW PARTICIPATION, ABSENT

Users and roles

As a trainee I want to sign in to class on time and show that I am here

As a volunteer I want to update trainees’ self reports and add nuance around participation

As a cohort we want a quick report on our participation

Remember: Do the simplest thing that could possibly work.

Likely challenges

• Trainees might forget to clock in – how will you handle this?

• A public API cannot expose trainee names directly – how will you handle this?

Stretch goals

*As a volunteer, I want to sign in to class and show that I am here*

Add sign in for volunteers and create a separate participation report so that volunteer participation is also made visible

Data Processing/Reporting

• Written summary - Produce a short summary of participation

  • Slack integration: Post a summary after a class in a specific private channel for stakeholders.

• Aggregated Summary - Have a summary for one or several cohorts with detailed information for module leads

  • Aggregated Visualisations - Present graphs of data to be able to see progress over a given time period

What Rubbish

[THIS VERY CHALLENGING FRONT END PROJECT COULD INVOLVE SOME PYTHON AND A LOT OF LEARNING]

Business problem

At CodeYourFuture we are many of us travellers. But everywhere we go, recycling works differently. We are highly conscientious people so this is exhausting. Sometimes it feels like we are collectively accumulating a PhD in recycling rules around the world. How can we know what to recycle and what is general waste?

What is the simplest thing that could possibly work?

Proposed functionality

Computer Vision and Classification

• Camera view - User points camera at trash item

• Object recognition

  • OpenCV for basic shape and color recognition

  • MobileNetV2 model for complex items

• Waste categorisation - Classify items as recyclable, compostable, or landfill

• Application built as a PWA

Users and roles

As a conscientious environmentalist, I want to quickly sort my rubbish wherever I am

As a CYF host I want my offices to be cleaned up after classes

As a CYF member I want to clean up after class

Stretch goals

• QE: Integrate Lighthouse testing into the deployment workflow

• Cloud: Define GitHub actions and set budgets for Lighthouse scores

• Data: enhance advice with the Waste Services API

Things to consider:

• OpenCV.js to perform shape and colour recognition in the browser for initial sorting

• TensorFlow.js to load a pre-trained MobileNetV2 model for advanced object identification.

• The front end could be built with React, making use of Service Workers for PWA caching

• The computer vision logic can run entirely on the client-side

• OpenCV directly in the browser (webassembly + webworker)

• Adding TensorFlow.js WASM Backend in Create React App | by Gant Laborde | Red Shift

• https://github.com/reshamas/deploying-web-app

• Deploying a Deep Learning Model on Web and Mobile Applications

• Image Model - Teachable Machines

• How to build an image classifier for waste sorting | by Collin Ching | Towards Data Science

There’s an API-focused briefing for the same business problem here: Final Project: How Does It Work Here