Topswop

A Svelte + Firebase web-app for trading second-hand items.

Topswop

Introduction

Topswop is a web-app for trading second-hand clothes. It is built using Svelte and DaisyUI for the front-end, and Firebase for the back-end.

Written by Team Foobar: Dan Everson, Cat Hoang, Syed Javaid, and Maxim Parker.

Latest version 1.0.0 (11 March 2022).

How to run a local copy

1. Install dependencies

$ npm i

At a minimim, Firebase 9.6.7 must be installed.

2. Add your own Firebase config file

Create a new Firebase project and a new app within it
Go to Project settings

Scroll down to the code excerpt and copy the object called firebaseConfig. It should look like this:

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

Copy this object into a new file in src > utils called firebaseConfig.js, and export it like so:
```
export const firebaseConfig = {
  // ...
};
```
Your local copy of Topswop will now have access to your Firebase app.

4. Add collections to Firestore Database

In order to function, the app requires certain collections be available in your Firestore Database (a.k.a. 'Cloud Firestore'). Start three collections in your app:

listings
matches
messages

Note: By design, a document is required in order to start a collection in Firestore, but the name and contents of this document are irrelevant. You should delete the dummy document immediately after starting the collection.

5. Start your local copy

HOST=0.0.0.0 npm run dev

Acknowledgements

This project was completed as part of the front-end module on the Northcoders bootcamp. We couldn't have done this without the intensive 12 weeks of mentoring provided by their hard-working and friendly tutors.

Top categories