Git Product home page Git Product logo

atcoder-novisteps / atcodernovisteps Goto Github PK

View Code? Open in Web Editor NEW
29.0 3.0 7.0 3.91 MB

【非公式】 AtCoder 上の問題について、取組み状況を記録していくサイトです。各問題が細かく難易度付けされており、必要な知識を段階的に習得できます。

Home Page: https://atcoder-novisteps.vercel.app/

License: MIT License

JavaScript 0.98% Dockerfile 0.11% TypeScript 81.25% HTML 0.08% Svelte 17.52% CSS 0.05% Shell 0.02%
atcoder classfication competitive-programming difficulties forbegginers problems small-steps sveltekit typescript vercel monorepo postgresql supabase tags

atcodernovisteps's Introduction

AtCoder NoviSteps

【非公式】 競技プログラミングサイトAtCoder 上の問題について、取組み状況を記録していくサイトです。
各問題が細かく難易度付けされており、必要な知識を段階的に習得できます。

GitHub Repo stars GitHub Workflow Status (with event) GitHub Repo Issues License: MIT Follow @acnovisteps on Twitter

GitHub Sponsors

DEMO

demo.mp4

特長

  • 回答を自分で記録: 各問題の回答状況について、「AC (正解)」「解説AC」「挑戦中」「未挑戦」から選んで記録できます。
  • 難易度の細分化: 17段階で難易度付けされており、現在の実力より一歩先の問題に挑戦できます。

主な機能

  • 問題の回答状況の記録
  • 自分に合った難易度の問題が選べる

予備知識

対象ユーザ

使い方

  1. (初回のみ) ユーザ名とパスワードを入力して、アカウントを作成します。
  2. ログインします。お試し用のアカウント (ユーザ名: guest、パスワード: HelloGuest) を利用することもできます。
  3. グレード (難易度) および問題を選び、「回答状況を更新」ボタンを押します。
  4. 4種類のボタン (デフォルトは、「未挑戦」) のうち、該当する回答状況を押します。

本サービスのスポンサー(敬称略・順不同)

本サービスの開発・運営を応援してくださり、ありがとうございます。

GitHub Sponsorsで寄付していただいた方には、いくつかの特典をご用意しております。

💚 AtCoder Clans Sponsor

🌐 Domain Supporter

🍨 Ice Cream Supporter

  • ia7ck
  • tomii9273
  • toshi201

注意事項

  • 本サービスに関するお問い合わせは、以下の連絡先に直接いただけると幸いです。公式のサポート対象外のため、運営チームへの問い合わせは絶対しないでください。

  • ご利用は自己責任でお願いします。

ご要望、ご報告、お気付きの点など

関連プロジェクト・参考資料

開発・運営メンバーと役割分担

  • @けんちょん
    • 役割: 本プロジェクトの発起人・全体統括(難易度付け、アプリ開発)
    • 貢献内容: 開発メンバーの募集、プロジェクト全体管理・運営、問題の難易度評価、問題集作成など
  • @hiro
    • 役割: 主にアプリ開発
    • 貢献内容(予定も含む): アプリの仕様に関する提案・技術選定・設計・実装
  • @ウルズニャー
    • 役割: 問題の難易度評価
    • 貢献内容(予定も含む): 問題の難易度評価
  • @nonon
    • 役割: 問題の難易度評価
    • 貢献内容(予定も含む): 問題の難易度評価、問題集作成
  • @あべみ
    • 役割: アプリ開発
    • 貢献内容(予定も含む): アプリ開発
  • @わさせき
    • 役割: アプリ開発
    • 貢献内容(予定も含む): デザイン監修
  • @toshi201
    • 役割: アプリ開発
    • 貢献内容(予定も含む): アプリ開発

ライセンス

MIT

atcodernovisteps's People

Contributors

dependabot[bot] avatar kato-hiro avatar prettyhappycatty avatar toshi201 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

atcodernovisteps's Issues

類似プロジェクトとの差別化を図りましょう

  • AtCoder List

  • AtCoderToNotion

    • Chrome拡張機能
    • Notionで問題文と一緒に管理できる
    • コメントも簡単に入れられる
  • AC Solutions

  • アルゴ式

    • スモールステップで実力を伸ばすことができる教材

各級・段のサンプルを表示できるようにしましょう

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// See:
// https://lucia-auth.com/database-adapters/prisma/
model User {
  id           String    @id @unique
  auth_session Session[]
  key          Key[]
  // task_answers TaskAnswer[]

  // here you can add custom fields for your user
  // e.g. name, email, username, roles, etc.
  username   String   @unique
  role       Roles    @default(USER)
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt

  @@map("user")
}

// See:
// https://www.prisma.io/docs/concepts/components/prisma-schema/data-model#defining-enums
enum Roles {
  ADMIN
  USER
}

model Session {
  id             String @id @unique
  user_id        String
  active_expires BigInt
  idle_expires   BigInt
  user           User   @relation(references: [id], fields: [user_id], onDelete: Cascade)

  @@index([user_id])
  @@map("session")
}

model Key {
  id              String  @id @unique
  hashed_password String?
  user_id         String
  user            User    @relation(references: [id], fields: [user_id], onDelete: Cascade)

  @@index([user_id])
  @@map("key")
}

// model Task {
//   id String @id @unique
//   // task_answers TaskAnswer[]

//   contest_id String
//   task_id    String
//   title      String
//   grade      TaskGrade @default(PENDING)
//   created_at DateTime  @default(now())
//   updated_at DateTime  @updatedAt

//   @@map("task")
// }

// // 10級(最も簡単)〜7段(最難関)。基準は非公開。
// enum TaskGrade {
//   PENDING // 未確定
//   Q10 // 10Qのように表記したいが、数字を最初の文字として利用できないため
//   Q9
//   Q8
//   Q7
//   Q6
//   Q5
//   Q4
//   Q3
//   Q2
//   Q1
//   D1
//   D2
//   D3
//   D4
//   D5
//   D6
//   D7

//   @@map("task_grade")
// }

// model TaskAnswer {
//   id                String           @id @unique
//   task_id           String
//   user_id           String
//   submission_status SubmissionStatus @default(NS)
//   created_at        DateTime         @default(now())
//   updated_at        DateTime         @updatedAt
//   task              Task             @relation(references: [id], fields: [task_id], onDelete: Cascade)
//   user              User             @relation(references: [id], fields: [user_id], onDelete: Cascade)

//   @@index([task_id])
//   @@index([user_id])
//   @@map("task_answer")
// }

// // TODO: TLEや「後で解く(Solve Later)」などの選択肢を増やす場合は、スキーマを更新する
// enum SubmissionStatus {
//   NS // No Submission
//   WA // Wrong Answer
//   AC // Accepted
// }

JavaScriptのruntimeをNode.jsからbunに変更することを検討してみましょう

WHY

  • 導入する理由
    • 各種処理が高速なので、開発体験が良くなる
    • TypeScriptが実行できる(JSにトランスパイラしなくて良い)
    • オールインワン・ツールキット(パッケージマネージャ、バンドル、テストツール)
    • Web標準APIに対応 + Node.js APIとの互換性を目指している = Node.jsからの移行の敷居が低い

WHAT

  • 導入をしたいと考えている部分
    • パッケージマネージャ
    • CI

TODO

  • サンプルrepoを作って試してみる
    • Dockerコンテナを用意
    • package.jsonを書き換え
    • CIの設定ファイルを書き換え
    • 壊れた部分や互換性がない部分などのトラブルがあれば修正
  • 現在のrepoを置き換え

懸念事項

See

https://bun.sh/guides/ecosystem/sveltekit
https://bun.sh/guides/ecosystem/vite
https://github.com/gornostay25/svelte-adapter-bun

回答状況を更新したときに画面がチラつくので改善しましょう

もしかすると、以下の方法で改善されるかもしれません

<script lang="ts">
	import { enhance } from '$app/forms';
	///
</script>

<form action="/name" method="POST" use:enhance>
	<button type="submit">Click</button>
</form>

上記の方法では、ボタンを押しても画面の更新がされていないようです

内部実装のリファクタリング: 問題とユーザ情報を分けて、サーバ側の処理で統合しましょう

WHAT

  • 現状では、サンプルデータで、問題とユーザ情報をまとめている

WHY

  • DB: テーブルの正規化を行った方がいいと思われるため
    • 問題セットとユーザ情報が密結合しているが、本質的に別々に処理した方がいいと思われるため
    • どの程度ユーザに利用していただけるか分からない状態で、DBサービスでの使用データをなるべく少なくして無料枠の範囲におさめたい、という懐事情もある

DBにデータを保存できるようにしましょう

TODO

  • Prismaのインストールと初期設定
  • VSCode: Prismaの拡張機能を導入 (Prisma.prisma)

既存のテンプレート・プロジェクト

CSSフレームワークを導入しましょう

https://joyofcode.xyz/sveltekit-with-tailwind-css

データの取得: ベタ打ちのサンプルデータ→DBから取得できるようにしましょう

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// See:
// https://lucia-auth.com/database-adapters/prisma/
model User {
  id           String    @id @unique
  auth_session Session[]
  key          Key[]
  // task_answers TaskAnswer[]

  // here you can add custom fields for your user
  // e.g. name, email, username, roles, etc.
  username   String   @unique
  role       Roles    @default(USER)
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt

  @@map("user")
}

// See:
// https://www.prisma.io/docs/concepts/components/prisma-schema/data-model#defining-enums
enum Roles {
  ADMIN
  USER
}

model Session {
  id             String @id @unique
  user_id        String
  active_expires BigInt
  idle_expires   BigInt
  user           User   @relation(references: [id], fields: [user_id], onDelete: Cascade)

  @@index([user_id])
  @@map("session")
}

model Key {
  id              String  @id @unique
  hashed_password String?
  user_id         String
  user            User    @relation(references: [id], fields: [user_id], onDelete: Cascade)

  @@index([user_id])
  @@map("key")
}

// model Task {
//   id String @id @unique
//   // task_answers TaskAnswer[]

//   contest_id String
//   task_id    String
//   title      String
//   grade      TaskGrade @default(PENDING)
//   created_at DateTime  @default(now())
//   updated_at DateTime  @updatedAt

//   @@map("task")
// }

// // 10級(最も簡単)〜7段(最難関)。基準は非公開。
// enum TaskGrade {
//   PENDING // 未確定
//   Q10 // 10Qのように表記したいが、数字を最初の文字として利用できないため
//   Q9
//   Q8
//   Q7
//   Q6
//   Q5
//   Q4
//   Q3
//   Q2
//   Q1
//   D1
//   D2
//   D3
//   D4
//   D5
//   D6
//   D7

//   @@map("task_grade")
// }

// model TaskAnswer {
//   id                String           @id @unique
//   task_id           String
//   user_id           String
//   submission_status SubmissionStatus @default(NS)
//   created_at        DateTime         @default(now())
//   updated_at        DateTime         @updatedAt
//   task              Task             @relation(references: [id], fields: [task_id], onDelete: Cascade)
//   user              User             @relation(references: [id], fields: [user_id], onDelete: Cascade)

//   @@index([task_id])
//   @@index([user_id])
//   @@map("task_answer")
// }

// // TODO: TLEや「後で解く(Solve Later)」などの選択肢を増やす場合は、スキーマを更新する
// enum SubmissionStatus {
//   NS // No Submission
//   WA // Wrong Answer
//   AC // Accepted
// }

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.