https://github.com/ythecombinator/techlabs-workshop-weekend-2020
Sample app used during my "Building a modern front-end application for your project" workshop.
https://github.com/ythecombinator/techlabs-workshop-weekend-2020
react typescript
Last synced: 4 months ago
JSON representation
Sample app used during my "Building a modern front-end application for your project" workshop.
- Host: GitHub
- URL: https://github.com/ythecombinator/techlabs-workshop-weekend-2020
- Owner: ythecombinator
- Created: 2020-12-13T04:11:31.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-13T06:06:57.000Z (over 4 years ago)
- Last Synced: 2025-01-18T10:28:44.877Z (5 months ago)
- Topics: react, typescript
- Language: TypeScript
- Homepage: https://techlabs-workshop-weekend.netlify.app/
- Size: 694 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Sample app used during my "Building a modern front-end application for your project" workshop.
## Getting Started
Clone the repository.
```sh
git clone https://github.com/ythecombinator/techlabs-workshop-weekend-2020
```
`cd` into the directory.
```sh
cd techlabs-workshop-weekend-2020
```
Install the project dependencies:
```sh
yarn
# or
npm install
```
Start the development server:
```sh
yarn start
# or
npm run start
```
🚀 Head over to [localhost:3000](http://localhost:3000) in your browser of choice.
## Toolbelt
- [x] React as a UI language
- [x] Typescript for compile-time safety and code scalability with Interface oriented development
- [x] Material UI as our design toolkit
- [x] Formik + Yup for forms and their validation
- [x] SWR for data fetching
- [x] Day.js for date handling
## Project Structure
The project follows a regular [create-react-app](https://github.com/facebook/create-react-app) skeleton with very few modifications.
Under the src folder, we have two main directories:
### `shared`:
Which contains, as the name suggests, shared behavior, including:
- `assets/`: Images, CSS files, and other static assets
- `components/`: Components reused across pages
- `layouts/`: Reusable Layouts
- `models/`: Shared interfaces, enums, type aliases, and other TypeScript stuff
- `utils/`: Helper functions reusable across the project
### `modules/`:
These are each isolated functionality. Examples are:
- `auth`, split into `sign-in` and `sign-up`;
- `home`
- `events`
Each module is organized in:
- `components/`: Components relevant to that page
- `hooks`: Selectors, data access and mutation, and other hooks
- `models/`: TypeScript relevant stuff
Directories look like this:
```sh
|-- shared/
| |-- api/
| |-- assets/
| |-- components/
| |-- core/
| |-- layouts/
| |-- models/
| |-- utils/
| |-- ...
|-- modules/
| |-- auth/
| |-- sign-in/
| | |-- ...
| |-- sign-up/
| | |-- ...
| |-- ...
| |-- events/
| |-- components/
| |-- core/
| |-- hooks.ts
| |-- models.ts
| |-- index.ts
| |-- ...
| |-- ...
| |-- api/
| |-- assets/
| |-- components/
| |-- core/
| |-- layouts/
| |-- models/
| |-- utils/
```