Skip to content

Puzzlrs allows people who love puzzles to trade amongst each other. As puzzlrs ourselves, we identified a shared experience: who wants to do a puzzle more than once? Prototype application.

Notifications You must be signed in to change notification settings

Puzzle-Capstone/puzzlrs-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Puzzlrs

Tired of your puzzles? Trade with people like you!

Table of Contents

Introduction

Puzzlrs allows people who love puzzles to trade amongst each other. As puzzlrs ourselves, we identified a shared experience: who wants to do a puzzle more than once? We all related to having multiple 'gently used' puzzles gathering dust in our homes while we were out buying new every time. We set out to provide an alternative, more sustainable solution. We envisioned a circuit of puzzles being sent around amongst a community of puzzle lovers. It's a win-win: everyone gets to enjoy doing new puzzles and there is less waste. And we all have emptier cabinets.

With puzzlrs, users can log in and upload their own puzzles available for trade. They can view the full list and filter by metrics like category, piece count, and quality. By clicking any given puzzle, they can request a trade. Whoever's puzzle is being requested then receives an email. Via their user profile, they can see all puzzles they've listed, any requests they've sent, and they can accept or deny any requests they've received.

This application was created in just 2 weeks by a team of 3 front-end and 2 back-end students for our capstone project at Turing School of Software & Design.

Technologies

React React Router TypeScript Cypress JSX NPM MUI HTML5 CSS3 Figma VSCode CircleCI

Deployment

Visit Site Here

To view in browser:

  1. Visit the deployment link above

To run locally:

  1. Clone this repo down to your local machine: here
  2. On the command line, type: npm install
  3. On the command line, type: npm start
  4. Visit http://localhost:3000/

Site Overview

Scroll down for screenshots:

Home Page

Screen Shot 2022-02-16 at 8 38 13 PM

View Puzzles Page

Screen Shot 2022-02-16 at 8 38 26 PM

Screen Shot 2022-02-16 at 8 39 07 PM

Screen Shot 2022-02-16 at 8 39 22 PM

Add Puzzle Form

Screen Shot 2022-02-16 at 8 38 36 PM

User Profile

Screen Shot 2022-02-16 at 8 38 47 PM

Screen Shot 2022-02-16 at 8 39 38 PM

Screen Shot 2022-02-16 at 8 39 52 PM

Received Emails

Screen Shot 2022-02-15 at 7 32 38 PM

Screen Shot 2022-02-15 at 7 32 28 PM

Screen Shot 2022-02-15 at 7 32 21 PM

Error Handling

Screen Shot 2022-02-16 at 8 48 19 PM

Screen Shot 2022-02-16 at 8 48 32 PM

Screen Shot 2022-02-16 at 8 49 00 PM

Responsive Design

Screen Shot 2022-02-16 at 8 30 23 PM Screen Shot 2022-02-16 at 8 30 41 PM Screen Shot 2022-02-16 at 8 31 26 PM Screen Shot 2022-02-16 at 8 31 41 PM
Screen Shot 2022-02-16 at 8 32 35 PM Screen Shot 2022-02-16 at 8 31 11 PM Screen Shot 2022-02-16 at 8 32 00 PM Screen Shot 2022-02-16 at 8 30 54 PM

Wins And Challenges

Wins

  • A requirement for this project was that we self-teach and use a technology we had not used before. We decided to implement TypeScript. One key win was our ability to learn TypeScript in a very short period of time and use it within a complex web application.
  • We also used React' Context API and this made for a fairly streamlined data model.
  • It was a great experience using React's MUI library for beautiful, standardized components.
  • Being able to give the user the ability to upload photos with Cloudinary API was another win that made this project successful.

Challenges

  • As stated above, we challenged ourselves to implement TypeScript. This came with a healthy dose of challenges. Certain processes and features took longer than originally planned. Because we were learning as we went, we feel we would have planned differently from the beginning in terms of data flow and structure had we been more familiar with the intricacies of typed JavaScript.

Future Improvements

  • Implement ability to create an account and use authuntication to log in as a user. Currently this application is set up more as a prototype with preset users, populated from a dropdown.
  • Refine functionality so that a user cannot request their own puzzle.
  • Add more user-user communication features:
    • Build out request mechanic so that requestor can include a puzzle they are suggesting as a trade
    • Add messaging between users once request is accepted

Authors

Carly Collums GH Kyra Bergsund GH Ricardo Tovar GH
Carly Collums Kyra Bergsund Ricardo Tovar

About

Puzzlrs allows people who love puzzles to trade amongst each other. As puzzlrs ourselves, we identified a shared experience: who wants to do a puzzle more than once? Prototype application.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •