🚩 개발자 README는 여기서 확인해주세요!

Coderder

Plan Your Group Meetings with Coderder!
This web application allows you to view your group members' schedules combined
and figure out the most suitable meeting time at a single glance.

팀원들의 시간표를 모아서 보여주는 웹서비스.
최적의 모임 시간을 한눈에 찾을 수 있습니다!

Visit Coderder

---Try with the following account/다음 임시 계정을 사용하세요---

🧑 username: gildong
💨 password: asdfasdf!

Table of Contents

• Installing
• Features
• Folder Structure
• Tech Stack
• Contributors
• More to come...

Installing

To run locally, clone the repository and run npm i && npm start.

$ npm install
$ npm start

You also need to create an .env file in the root directory and set following environment variables. See .env.example

# .env
REACT_APP_BASE_URL={server IP address}

Features

:: Create Account

• Create an account with username, password, and nickname.

:: Add your schedule

• Click & Drag on the calendar to create new events. Give a title explaining the event.
• Click on an existing event to delete it.

:: Create your own group

• Create your own group.
• You may change the group's name or delete the group.

:: Invite members to your group

• Search members with username and invite them to your group.
• You may uninvite or delete a member from the group.

• Accept or reject invitations.
• You may leave the group.

:: Add group schedules

• Each unique color represents a different member.
• Click & Drag on the calendar to create new events. Give a title explaining the event.
• Click on an existing event to delete it.

Folder Structure

src
├── api             // functions calling backend APIs
├── assets
├── components      // components categorized by usage
│   ├── common      // componets used in common (ex. button, input)
│   ├── layouts     // layouts used in router
│   ├── members
│   ├── navbar
│   └── schedule
├── constant        // string values as constants
├── hooks           // SWR hooks and other react hooks are separated
│   ├── common
│   └── swr
|       ├── invitation
|       ├── member
|       ├── schedule
|       └── team
├── lib             // collection of helper functions (ex. browser storage actions)
│   └── storage
├── mocks           // MSW mock functions
├── routes          // router
├── styles
│   ├── componentStyle   // styled-components and css
│   ├── globalStyle      // styles applied globally
│   └── theme            // hex color codes, etc.
├── types           // type declaration
├── utils           // utility functions
│   ├── common      // utility functions used in common
│   ├── schedule
│   └── team
└── views           // pages provided to the router

Tech Stack

Category	Tech
Language
Framework
Data/State Management
Style
Design
Other third-party libraries
DX
Server
Collaboration

Contributors

• 🧍 임지우 (@lim-jiwoo)
• 🧍 권영재 (@dwdjjj)

More to come...

What future plans we have for improvements and new features?

• Show the recommended times for group meeting on the calendar.
• Show the 'density' of members' schedules for each time range, represented by color intensity.
• When user clicks on a member badge, show the member's schedule only.
• Edit my information.
• Delete my account.
• Edit schedule by dragging the edge.