Code Monkey home page Code Monkey logo

rhythmate-web's Introduction

Rhythmate-Web

ゲーム感覚で習慣化を楽しめるサービスRhythmateのフロントエンドです。
バックエンドはこちらから

アプリ概要

技育CAMPハッカソン2023 vol15努力賞受賞・技育博2024 vol2企業賞受賞

「習慣化×ゲーム」をコンセプトとし、自分の設定したクエストを達成していくことで習慣化を図ることができるWebアプリケーションです。モバイルファーストでUIの設計をしています。現在は、以下の機能を提供しています。

  • クエスト機能
  • 週次レポート機能
  • ユーザ―レベルアップ機能
  • バッジ収集機能

主な技術スタック

  • 言語

    • TypeScript
  • フレームワーク・ライブラリ

    • React
    • Tailwind CSS
    • Tanstack Router
    • Tanstack Query
    • react-hook-form
    • zod
  • ツール

    • biome
  • PaaS

    • Vercel
  • その他

    • git submodule

システム構成

システム構成図

環境構築

前提

  1. パッケージ管理にpnpmを利用するので、有効化します。
$ corepack enable pnpm
  1. node_modules をインストールする。
$ pnpm i
  1. .env.exampleをコピーして.env配置する。(値は管理人に尋ねること。)
cp .env.example .env
  1. git submoduleと連携する。また、特定のディレクトリやファイルのみを取得したい場合は、sparse-checkoutの設定を行ってください。(参考
$ git submodule update --init

Reactを起動する。

$ pnpm run dev

Formatterをかける。

$ pnpm run format

Linterをかける。

$ pnpm run lint

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.