Sportr

Sportr is an app designed to be a ‘Tinder style app’, but for sports. Sportr allows users to create sport events that are shared to the larger community to be swiped on to find others to play a variety of pick-up style sports with. Building Sportr in less than two weeks was a great example of a real-world environment working with a team harmoniously while also teaching ourselves new tech stacks not covered in our bootcamp and meeting our set deadline.

Final Product

Full demo of all component functions: logging in, browsing event feed and my events, creating events, viewing profiles, updating profiles (selecting events changes event feed contents based on events and preferences).

"Two browsers running Sportr updating one another"

Features

  • A host of different components built with Chakra UI fully custom-made to create a functional, intuitive UI that is highly optiimized and beautifully designed.
  • WebSockets are used to create a seamless user experience: no refreshes are required for automatic updates to a users feed of new events.
  • Sportr uses NextJS and React for the framework, and uses Chakra UI to help design the frontend with feature-rich components, all together ensuring it’s highly functional, intuitive, and useful
  • Full tech stack: React, NextJS, Chakra UI, Javascript, Knex.js, postgreSQL, Google Maps API and WebSockets.

Setup

This is a Next.js project bootstrapped with create-next-app.

Install dependencies with npm install.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser.

GitHub

View Github