How five students worked together to help the community through code.
Last May, we launched a new initiative to help our students get hands-on work experience while giving back to their community. Our instructors created a two-week placement that allows students to gain experience with third sector organisations by prototyping, coding and improving apps or websites.
Over the course of eight months, a total of 14 student teams participated, and within this last month alone four teams have assisted four different companies.
Two of our student teams were placed with One Cherry, a startup with a social mission to make shopping from local second-hand shops easy and enjoyable for everyone. Their website and mobile app allow users (these are the humans who actually use the app) to find charity shops within their area and shop for specific items. One Cherry uses a tech stack that includes Redux (a JavaScript library) and React Native (a framework for building mobile apps in JavaScript).
CodeClan students are trained in JavaScript and React during their time at CodeClan, and had to quickly pick up React Native and Redux and get confident with it – not to mention stepping into a large, professional code base (all of the code One Cherry has ever written).
Our five most recent students placed with One Cherry aimed to improve their mobile app by enhancing key points in the customers journey – specifically, how they find a shop on a map and get information about it. Here’s their explanation of what they did-and what they learned.
A student’s perspective: what we learned from working for a company.
This was the first work placement our team had done as developers- making it an intimidating but overall rewarding experience. While we did have to learn new languages that we had no prior experience with, the biggest learning experience was working with a team in a work environment.
Finishing up the 16-week course at CodeClan, our whole group was searching for careers making it a super busy time in all of our lives. We had to work around everyone’s schedules such as job interviews and appointments which made finding a time when we all could meet difficult. Sometimes we would arrive to do work and not know who would be able to show up. However, we were able to schedule our time so there was always at least someone in CodeBase, where we were working.
As a team, we had to learn that breaks are critical to the motivation, creativity, and overall wellbeing of our team. We had to take care of ourselves but also our teammates. We also made a point to ask for help when we needed it- we didn’t want to make situations more stressful if there was an easy solution.
It was also a valuable lesson to have communication within our team and One Cherry, as we had to adapt the app to the changing needs and requirements.
How we improved the One Cherry app.
The One Cherry app shows a map of charity shops in Edinburgh, you can click on a charity shop and see a list of their current stock.
We first established our goals for the two week project (you can see what we did through the gif images below!):
- Allow users to select a pinpoint/shop marker on a map by tapping it, and then have a card show up that shows the user information about the pinpointed shop.
- Create a circle around a fixed position on the map with a slider at the bottom of the page to change the radius of the circle to show relevant charity shops to a user.
We installed and set up React Native Debugger, which is a tool that helped us to achieve both of these tasks. It proved to be a learning experience to understand how to get it running at the same time as the simulator.
We then decided mob programming would be the most beneficial way to work together. This meant that rather than pairing off, the entire team would work collectively to better understand the codebase and be able to decide on ideas as a group.
We watched a couple of tutorials on Redux to learn more about actions and reducers – this would help to understand how shop markers on a map would appear where they needed to on the screen.
Giving charity shops more presence on the map.
We worked alongside Jarrod, an instructor at CodeClan, to make the pinpointed shopMarkers only pop up when they are called upon by the user. We then added a return statement to shopMarkers to make the markers appear on the map. This means that when the user selects the shop’s card at the bottom of the map, a marker appears on the map showing the shop’s location.
Then, creating an ‘attemptScroll’ function enabled users to click on a marker and it scrolls the shop wrapper (the area at the bottom of the screen) to the correct shop card. This means that users of the app can essentially tap on a shop’s location to reveal more detail about that shop in the cards below the map on their screen.
Creating a richer map experience.
We added a section at the top of the map to display a title and back button, and created a circle around a fixed position on the map with a slider at the bottom of the page to change the size/radius of the circle. We also created the functionality to centre the circle on the user’s location when they first open up the map.
The circle we created needed some touching up, so we filtered out data so that the map only showed markers for shops that are currently on OneCherry. We then added an ‘isShopInCircle’ function to return a boolean (a true/false statement). This means the app can tell if a shop is inside the selected circle or not, and therefore only the relevant charity shop locations will show on the screen.
To finish, we locked the circle to the screen so that it stays in the centre of the page when a user moves around the map.
Shop on One Cherry!
The code that these five students contributed will be used by thousands of One Cherry app users.
The Android and iOS app haven’t shipped yet but you can use One Cherry’s web app right now if you’d like to pick up a bargain and help a good cause in the process.
Interested in building apps?
Find out more about our 16-week Professional Software Development course or come along to our next info session in Edinburgh or Glasgow.
