GithubHelp home page GithubHelp logo

kaichou-graduation's Introduction

Kaichou Graduation Project

The Kaichou Project is a graduation tribute website for the VTuber Kiryu Coco.

Setup

To set up and run the project you will need to have node (at least version 12) and yarn installed.

First run yarn install and wait for the dependencies to finish installing.

Next, copy and rename the .env.example files in both front- and backend to .env. Do not delete the .env.example.

Lastly you should be able to start the project by simply running yarn dev.

To get linting to work in your IDE of choice (for example VSCode), install the prettier and eslint plugins.

Project Structure

The project is currently split into a frontend and backend package, both being tied together in the project root using yarn workspaces.

Both frontend and backend are using typescript for type safety.

Frontend

The frontend uses nextjs, which makes routing pretty simple. There is a components folder for anything that isn't supposed to show up on the actual website.

Use the public folder for images and assets.

For styling there is scss with css modules, so do not ever put any css inline unless absolutely required.

Also for styling there is the variables.scss which is to be used for global variables like colors and mixins. The globals.scss is mainly used for standardization and should rarely be touched at all.

Backend

The backend uses Express.js as server for hosting a REST API, which is all set up inside the src/index.ts. Backend also uses several other library:

  • Mongoose as ODM for Mongo DB
  • cors as enabler for CORS requests
  • morgan and winston for logging any activity that happens inside the backend service

Backend Folder Structure

backend
├───src
    ├───config
    ├───constant
    ├───controllers
    ├───middlewares
    ├───models
    │   └───schemas
    ├───services
    ├───utils
    ├───db.ts
    ├───index.ts
    ├───logger.ts
    └───route.ts
├───.env.example
├───package.json
└───tsconfig.json

Folders and files explanation:

  • src => stores all backend files
  • index.ts => entry point to backend
  • logger.ts => file for logger
  • route.ts => place all routes here
  • db.ts => file for MongoDB connection
  • config => store any shared config across backend here
  • controllers => place where you write handlers for routes
  • middleware => folder for middlewares
  • models => folder for MongoDB models
  • schemas => folder for MongoDB schemas
  • services => where you store any logic code related to data processing before it is saved or fetched to DB
  • utils => folder for util functions

Logs

After you start the backend server, a folder will be created automatically, named the logs folder. There are 5 log files that will be created and updated as the server runs, here is the actual place where any activity logs on the backend will be recorded.

ENV Variables

Env variable names inside package/backend/.env.example should be self explanatory. Here is more explanation of them:

  • NODE_ENV => Environment of the project, fill with development in your local machine and production in your live server
  • PORT => Backend service port
  • DEBUG => Set to TRUE if you want debug messages to show, ideally in dev you set this to TRUE and to FALSE in production
  • CLIENT_URL => frontend's URL
  • DB_URI => mongodb connection string, you can find the details for it here
  • KEY => Path to privkey file (OpenSSL)
  • CERT => Path to cert file (OpenSSL)

For frontend, Env variable can be found in package/frontend/.env.example, which includes:

  • PORT => Frontend service port
  • NEXT_PUBLIC_API_URL => URL for backend

Contributing

You do not need to be a member of the Kaichou-Project organization to contribute. Follow these steps:

  1. Fork the repository from here.

  2. Clone your fork locally.

  3. Optional, but recommended: Create a new branch on the latest commit of the branch you want to contribute to.

  4. Commit to the new branch (or the branch you want to contribute to, if you decided not to make a new branch).

  5. Push to your fork.

  6. Create a pull request from the branch you committed to in your fork to the branch you want to contribute to in the organization repository. We don't have a format for pull request descriptions, but please include any details that would help a reviewer.

Contributors License Agreement

By contributing to the Kaichou Project, you agree to the following terms and conditions for present and future contributions. The Kaichou Project reserves the right to modify these terms and conditions without notice and at the sole discretion of the Kaichou Project. If you contributed to the project prior to the establishment or modification of this agreement, by continuing to contribute to the project you agree to these terms and conditions for past contributions.

  1. Definitions

    "You" and "Your" means you and any organization on whose behalf you are entering this agreement.

    "Submission" means any work, including modifications or additions to existing work or a work not authored by You, that is submitted by You to a product managed by the Kaichou Project (the "Work")

    "Contribution" means any Submission that is an original work authored by You.

  2. Grant of Copyright License.

    You hereby grant to the Kaichou Project and to recipients of Your Contribution(s) distributed by the Kaichou Project a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, sublicense, and distribute Your Contributions and such derivative works.

  3. Grant of Patent License.

    You hereby grant to the Kaichou project and to recipients of Your Contribution(s) distributed by the Kaichou Project a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by You that are necessarily infringed by Your Contribution(s) alone or in combination with the Work to which such Contribution(s) was submitted.

  4. If your license grant is ineffective, you irrevocably waive your right to assert claims against the Kaichou Project, the Kaichou Project's successors in interest, and any direct or indirect licensees arising from the Kaichou Project's or the Kaichou Project's successors in interest's use, reproduction, preparation of derivative works, public display, public performance, sublicensing, and distribution of Your Contribution(s).

  5. You represent that you are legally entitled to grant the above license for Your Contribution(s) and that Your Contribution(s) do not infringe on the intellectual property rights of any party.

  6. You represent that the Kaichou Project has been granted a license for Your Submission(s) such that the exercising of any rights granted by the above license would not infringe on any party's intellectual property or other rights, excepting the rights of COVER Corporation to the extent they exercise their rights.

  7. You represent that Your Submission(s) is submitted with complete details of any third-party license or other restriction including but not limited to related patents and trademarks of which you are personally aware and which are associated with any part of Your Submission(s), excepting licenses granted and restrictions imposed by COVER Corporation.

  8. You agree to notify the Kaichou Project immediately if you become aware of any inaccuracies in the above representations.

kaichou-graduation's People

Contributors

azuraga avatar fomtarro avatar glennpoh avatar h-isaac23 avatar holo-23 avatar josef-yu avatar juliankarhof avatar keijeizei avatar liaustin059 avatar mecki-messer avatar meckimesser avatar nyxordinal avatar ps-soundwave avatar redmaps avatar takoleakest avatar vince14genius avatar yosuahamonangan avatar yovic4 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

kaichou-graduation's Issues

A few Bugs

After i got back to my PC and had a look at the Desktop version i noticed a few Issues that i have seen beeing mentioned elsewhere as well. In no specific order those were:

  • Page is loading the content pretty slow (Might be related to how we deployed the page or in the way the DB is querried, Backend Crew should know more about that issue)
  • Only one loaded Image on the Fanart Page (idk how much have been moderated but i guess there should be more)
  • Overflowing Descriptors on the Video Page (ill get to it, ideas on how to solve this are appreciated)
  • Kaichou Thighs (i think that is fixed now, its also clearly a feature, not a bug)
  • Lots of people wondering where their posts are ( there is nothing explaining that we need to moderate first and that it could take a while on the submission page, i think a short paragraph would help)

This list is by now means meant to be complete, i might discover more bugs when i had a chance to further test.
On that note, am i allowed to do some light pentesting on the page? Maybe ill discover some security flaws. Of course i wont do anything disruptive to the page, i was thinking along the lines of sql injections and such

Change Site Icon

We're currently still using the default nextjs site icon, maybe someone has a more creative idea.

Unit Test in Backend

We'll start implementing unit tests on backend as the service grows bigger
Unit test will using jest framework
What you have to do is write the test code for each service and controller , and integate it with the husky pre-commit

Note:
if anyone has any other recommendations for testing framework in node js, let me know in the comment section

Fixing size, gaps etc

Now that most of the pages is made, I think we need tidy up a lot of things. This includes adjusting font sizes #74 and adjusting margin and padding so that the gap is more uniform across component (current there are component with no gap or too much gap)

Fix mobile layout

Currently, some elements are not transformed well on a mobile screen, making them e.g. too big, not properly aligned, etc.

Every (or at least the main) component(s) should be checked and made decent on mobile screens. To test with multiple screen sizes, other than manually resizing your web browser window, your web browser might have a developer option to test on different resolutions.

Adding Title Property in Video Model

There is a need to store the video title in the DB, basically what will have to do is :

  • add new property title in Video Model in Backend
  • add new input in Video/Clip submission form in Frontend

To the top button

image

Seems like "to the top" button has not been implemented, so I'm planning on doing it

API Endpoint for Fan Art (Backend)

Create four new API endpoints in backend:

  • Endpoint for fetching all fanart (using GET http method)
  • Endpoint for creating new fanart (using POST http method)
  • Endpoint for updating the fanart (using PUT http method)
  • Endpoint for deleting the fanart (using DELETE http method)

Notes:

  • you can use existing endpoint for reference
  • if in your endpoint there is request body required, always make sure you validate it in controller before passing request body value to the service
  • use appropriate response util

Message form

image
Planning on making message form. At least will include components:

  • text input
  • text area
  • new temporary page for testing the component

Soundboard sound-consistency

  • make sure all the sounds are (roughly) the same volume
  • add a fade-out so the ending doesn't cut off rapidly.
  • remove any starting/ending rests so the sound immediately starts/stops.
  • if available, update low-quality sounds with higher quality versions

Set up DB in Backend

Prepare model and schemas file for MongoDB based on existing ERD
Prefer to use mongoose as the ODM Library
You can access the ERD in this issue #6

ERD for the DB

Creating ERD for the DB so we can get overview of the data stored in the DB
This will help people working on BE and FE to easily find out how the data is structured and DB implementation too

ERD currently used:
Kaichou Graduation2

Implement Pagination in Endpoint for Fetching All Messages

Currently, the endpoint for retrieving all messages returns all message documents from mongoDB as is.
This is certainly will affect the load time. In order to fix this, we'll implement pagination in that endpoint.
For starting point, you can search for pagination in mongoose because we use mongoose as ODM for the MongoDB
Route for the endpoint is GET /message, you can find it in route.ts

Make ToTheTop button float

Since many pages will have infinite scroll, tothetop button have to be sticky and float. The button is hidden when the user is on the top and doesnt show until the user scrolls down enough

Improvements for MessageBoard

refactor code to reflect naming conventions of ERD
work on REST API
work on adding support for videos and images in the submit section

Add soundboard sounds to DB

To allow for easy addition of new soundboard sounds while the site is up, as well as resource management and unity in general, it could be possible to add a sounds table to the database, that stores the sounds.

Looking at what is currently available for the soundboard, this would need to at least include:

  • title
  • url
  • category

Responsive Fonts

We should probably work on responsive fonts for the page. I have read about some librarys that should work fine for it. I can look into this further and report my findings, i will probably also implement it for the clips page as well.
Is there anything that I have to look out for?

Initial Project Setup

Setup the project with the basic technologies we decide on.
This shouldn't take too long so everyone can branch off and work on their part as quickly as possible.
This also means the setup should be as minimal as possible initially.

Authorization for API

Currently all of our API can be accessed by everyone. Some API, like update and delete, need some sort of authorization so that only admin can access it. Do we have any authorization mechanism planned?

Navigation for forms

image

Forms has a bit different navigation. I'm planning on modifying the current navigation to make it, either make a new component based on existing navigation or modify existing component and adding some sort of prop to chose which style of navigation

API Endpoint for Video (Backend)

Create four new API endpoints in backend:

  • Endpoint for fetching all video (using GET http method)
  • Endpoint for creating new video (using POST http method)
  • Endpoint for updating the video (using PUT http method)
  • Endpoint for deleting the video (using DELETE http method)

Notes:

  • you can use existing endpoint for reference
  • if in your endpoint there is request body required, always make sure you validate it in controller before passing request body value to the service
  • use appropriate response util

API Endpoint for Message (Backend)

Create two new API endpoints in backend:

  • Endpoint for updating the message (using PUT http method)
  • Endpoint for deleting the message (using DELETE http method)

Notes:

  • you can use existing endpoint for reference
  • if in your endpoint there is request body required, always make sure you validate it in controller before passing request body value to the service
  • use appropriate response util

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.