Mates Rate (Apr 23-)
Online multiplayer game where you rate your friends and famous people in funny categories. Built with Django Channels and deployed on AWS.
See more here.
Hello!
I'm a recent graduate of the Northcoders bootcamp working with Python and Javascript/Typescript.
Take a look at some of the things I've been building and check out the code on my GitHub. I'm always looking to improve, so please get in touch with your suggestions!
Swim Wild (Sep 23)
Mobile app for tracking and gathering data on user-generated outdoor swimming spots. Built with React Native and node/express.js.
See more here.
Daily Express.js (Sep 23)
News/social media React app - the front end to my Articles API. UX features include infinite scrolling, optimistic rendering, url routing.
See more here.
Articles API (Aug 23)
RESTful API for a news/social media website built with Express.js. Features include pagination, querying and custom JWT authentication.
See more here.
SoundCloud Comment Scraper GUI (Dec 23 - March 23)
Python Tkinter GUI for scraping SoundCloud comments.
See more here.
0 of 10 stars caught 馃弳
Regret not going for the outer ones first?
Regret not going for the outer ones first?
Projects
WFMS Website
Typescript 路 Next.js 路 Storyblok | Dec 23 -
Currently working on a new website for Waltham Forest Music Service. Fully integrated with Storyblok headless CMS! Have a look at the demo here...
Check out the animated nav bar and (mostly) smooth UI features. Trying to get everything to look as slick as possible with no visual bumps! Lots of freedom with the design on this project, starting point being only the branding colours from the logo.
First project using a third-party headless CMS! Storyblok has been easy to use - would certainly recommend for most use cases. It works well with Next.js as you can use server side API endpoints to process forms built on the CMS, and take advantage of getStaticPaths and Storyblok webhooks to continually build all the content statically for great performance. Only limiting factors at the moment are document storage (free tier doesn't include pdfs) and compatability with Next.js 13. After a few weak integrations with the app router I downgraded to v12 and haven't had any problems since.
I've taken a modular approach to the content - my Storyblok components are generally as small as possible to improve flexibility and reuseability. Cautious use of the tailwind.config safelist has allowed things like colours, margins and visual effects to be controlled from the CMS, with changes appearing in real time thanks to the magic of Storyblok's visual editor which hooks into the application directly.
Art shop
Typescript 路 Next.js 路 Cypress | Oct 23 - Nov 23
This is an example implementation of an e-commerce website that I'm currently building for an artist. The business is pending, so for now you'll have to make do with this demo with fake products (don't worry - the stripe checkout isn't accepting live payments!)
View products organised relationally as the intersection of formats (prints, postcards etc.) and art pieces. Visit /admin (and use the password 'admin') to see the custom CMS. Send messages and buy products, receiving automated receipts and acknowledgements via email.
Full-stack application built with Next.js and Typescript. Prisma ORM connects to a Planetscale database, although I found this set up a little restricting by the end. I couldn't join multiple tables and fetch all the data I needed in one api call - will probably use GraphQL in future. Payments are handled by Stripe, emails with Nodemailer and react-email for templating.
A massive step forward in this project was using Tanstack Query for fetching - this allowed me to cache data easily and mark it as stale when neccessary. TailwindCSS was also much appreciated on the front end, I never felt restricted and it was much neater than using SASS! Deployment was very easy with Vercel, although I'm currently working out how to optimise the images better. I'm using imagekit.io CDN at the moment but still not happy with load times!
Swim Wild
Javascript 路 React Native 路 Express.js | Sep 23
Swim Wild is a mobile app for the emerging trend of wild swimming, planned and built in under two weeks as the culmination of the Northcoders Bootcamp. See a demo here!
Swim Wild provides a blend of user generated and web-scraped content to inform users about nearby swimmings spots, their features, and safety considerations. Users can create new locations, track and see data about their swim history, upload pictures and reviews, see nearby locations on a map, and receive realtime updates on hydrology and weather information from our network of APIs.
Backend built with TDD using node/express.js and MongoDB/mongoose. Authentication and image storage handled with Firebase. ML polynomial regression algorithms analyse timeseries data to predict water temperatures based on date and location. Front end uses React Native with Expo Go, leveraging device location, gallery and camera.
Mates Rate Web Game
Python 路 Django Channels 路 AWS | Apr 23 - Present
My most recent and developed Python project - an online multiplayer game built with Django Channels. Click here to play now!
Join or host a game with friends, and then take turns submitting characters or a category. Players vote on each character's performance in the chosen category, and the player whose character scores the highest overall wins. Supposed to be a fun game encouraging debate and out-of-the-box thinking!
Code is available here on GitHub. The app employs websockets for real-time interactivity; frontend using vanilla js/css, backend using python async/await, postgres, redis, Google Custom Search API, daphne/gunicorn servers. Unit testing with unittest, end-to-end testing with multiple instances of Selenium to simulate multiplayer gameplay. Type-checked with mypy, and deployed on AWS with Elastic Beanstalk, ElastiCache, RDS and Route 53. Logo and design the author's own.
Daily Express.js
Typescript 路 React | Sep 23 - Oct 23
This is the front-end website for my Articles API built with React and Vite. Click here to explore the site!
Browse the main feed without logging in. Filter and scroll through article preview cards, clicking on the title or image to access the full article and its comments. You can also click on users to view their profile and see what they have been up to! To vote, post comments, create articles and more, log in or sign up.
Code is available here on GitHub. The app is written using custom and composed functional components, JSX templating and SASS CSS following BEM standards. State, effect and context hooks achieve UI interactivity, modular loading, optimistic rendering, and a hybrid pagination/infinite scrolling system. Routing, navigation and URL search params are implemented with React Router v6, and responsive CSS via flex and media queries.
Articles API
Javascript 路 Express.js 路 Postgres | Aug 23
RESTful API that lets you store and retrieve json data for a news/social media website. Visit the GitHub readme, and then have a go here!
Read through articles, categories and users, and then log in to create, delete or vote for content. Filter results with queries and sorting.
Uses Express.js and postgres, with pg-format + raw SQL for seeding and interacting with db. Implemented authorisation middleware with refresh/access JWTs and password hashing/salting. Built using TDD with jest. Deployed with Render and ElephantSQL, implemented CI/CD with GitHub Actions and pre-commit testing with Husky.
In progress: Reinforcement Learning with Coup
Python 路 PettingZoo 路 TensorFlow | Oct 23
First attempt at Machine Learning! Training a Keras model to play the card game Coup. See the work-in-progress repo here.
Watch the computer play the game with random actions by running the file random_policy.py.
The main challenge when building the environment was figuring out how to enable the correct turn-based play; the PettingZoo AEC api was unsuitable because players can 'interrupt' at any moment and block or counter certain actions. My solution utilises the Parallel API (where players make moves simultaneously) along with action masking to force players into a move order that can change depending on game events.
Check out PettingZoo for more information on multi-agent Gymnasium environments, and RLlib for training. Best policy so far performs about twice as well as a random agent, winning 55.1% of games (n = 4000) against 3 other players making random decisions (would normally expect 25% win rate).
Historical UK Baby Names
Javascript 路 React 路 CSS | Aug 23
My first react project! Very simple code but taught me a lot about components/state etc. Watch this space for bigger React builds!
View the site, and choose baby names from throughout the twentieth century. Even has twins mode and sound effects....
Built with JS, React and vanilla CSS. Deployed on the free tier of Render which spins sites down after periods of inactivity. Apologies if the initial load takes a minute!
Do You Know Your Animals?
Javascript 路 Express.js | Aug 23
I was practicing DOM manipulation and using audio in js, and ended up with this game which turned out to be surprisingly hard.
Listen to the sounds and then try to click the animals in the right order. Even the smallest thought causes you to fail. A challenge for those with an obtrusive inner monologue.
There's nothing unusual or impressive in the code, but feel free to have a look anyway. It's another free-tier Render deployment, so apologies if the initial load takes a while...
Misc Problem Solving
Javascript 路 Jest | Jul 23
Just a collection of problems I've enjoyed solving over the last few months. Have a look at the repo!
Personal highlight was the Boggle problem - write a function that evaluates whether a word is valid on a given boggle board.
Topics include recursion, closure, and working with primitives vs objects.
SoundCloud Comment Scraper
Python 路 Tkinter 路 Selenium | Jan 23 - Mar 23
Scrape and download comments from SoundCloud.com - see what people are saying about the music you like!
This python package scrapes SoundCloud comments with a selection of built in and customisable filters. Data is exported to CSV, and can be scraped from individual track URLs, or parent URLs such as playlists or artist pages.
See the code! This project was intended initially for use in music scholarship, so I designed a Tkinter GUI as the main interface. However, the modules could be imported and used independently as in the example at the bottom of /src/app/backend/scraper.py.
This was my first ever coding project - excuse some poor design choices here and there! I've made some notes in the GitHub readme about things that need improving. At some point I might revisit the code and refactor it for a simple web app. It might also be a good starting point to practice some data analysis or ML, e.g. finding themes in an artist's discourse, or filtering spam comments.
About Me
As a student of musical analysis I became confident learning syntax and working creatively in technical environments. Coding puts these skills to use in a new context, and aligns my interests in design, communication and problem-solving.
Aside from programming, I鈥檓 a keen swimmer, sci-fi reader and Subbuteo enthusiast (1950s players only). I鈥檓 drawn towards hobbies that involve building or making things, and probably get too invested in logic puzzles and strategy games.
Writing and listening to music remains a big part of my life, and my favourite pieces usually involve some sort of creative negotiation with a musical form. There鈥檚 a parallel with coding there somewhere!
Contact
07887396271
jakejones1998@hotmail.co.uk
https://github.com/jakejones2
https://www.linkedin.com/in/jake-jones-318330102/
Click to download CV