Code Monkey home page Code Monkey logo

tmstats's Introduction

๐Ÿฅ‡ TMStats

Cover

๐Ÿ‘‹ Introduction

TMStats is a medal tracker that shows overview of all Trackmania medals an user achieved. The website allows user to share campaign or daily maps medals with anyone.

Project focuses on multiple aspects and features:

  • Track of the day (TOTD) medals in yearly view
  • Campaign medals in season view
  • Custom map medals in list view
  • Gamified achievement & quests system

As of right now, project has no business model and is fully free and open-sourced. Project generates expenses, and business model might be added in the future.

๐Ÿค– Tech Stack

TMStats uses multiple frontend and backend technologies with focus of simplifying the development. Main focus of tech stack in this project is to make development fast and fun, instead of making it scalable and reliable.

  • TailwindCSS, a CSS library to rapidly design components using HTML classes
  • Svelte, a JS library to build reactive frontend. Alongside this, application uses TypeScript
  • Svelte Kit, a Svelte framework to give proejct proper structure, routing and other cool features
  • Appwrite, a secure backend as a service that provides 90% of necessary backend functionality out of the box

๐Ÿ’ป Development Setup

Frontend:

  1. Install dependencies: npm install
  2. Spin-up HTTP server: npm run dev
  3. Visit localhost:3000

If you get Network Failed error, it most likely means CORS error, and backend refuses your hostname. To prevent this, either make sure you use localhost hostname, or make sure to add your hostname as platform inside Appwrite Project.

Backend:

You only need to spin-up backend if you man on backend changes. For frontend changes, you can skip this step as project is connected to production backend instance.

  1. Install Appwrite locally, or on development server

Make soure your .env file _APP_FUNCTIONS_RUNTIMES variable includes deno-1.14 runtime. This runtime is used by all functions in this project. Changes to .env are applied using command docker-compose up -d.

  1. Sign up into your Appwrite instance and create project with both name and ID set to tmStats
  2. Install Appwrite CLI locally, and login: appwrite login
  3. Enter cd backend
  4. Deploy collections: appwrite deploy collection
  5. Deploy functions: appwrite deploy functions

To prepare your changes from your Appwrite instance database to production one:

  1. Pull database changes: appwrite init collection

To create a new function:

  1. Create function: appwrite init function

Make sure you create functions using deno-1.14 runtime.

Feel free to do manual changes to appwrite.json if you are familiar with this file.

๐Ÿš€ Deployment

Frontend:

  1. Install dependencies: npm install
  2. Build project: npm run build
  3. Deploy folder build on a static hosting

Frontend build does not use any special environment variables.

Backend:

  1. Deploy database changes, if necessary: appwrite deploy collection
  2. Deploy function changes, if necessary: appwrite deploy function

๐Ÿ“š Svelte Kit Resources (Generated)

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!!!

# create a new project in the current directory
npm init svelte

# create a new project in my-app
npm init svelte my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

tmstats's People

Contributors

meldiron avatar

Stargazers

Benjamin J. avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.