Skip to content

Commit 58419cd

Browse files
vqiu25vqiu25
authored
Initial commit
0 parents  commit 58419cd

22 files changed

Lines changed: 3767 additions & 0 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
7+
permissions:
8+
contents: read
9+
pages: write
10+
id-token: write
11+
12+
concurrency:
13+
group: pages
14+
cancel-in-progress: true
15+
16+
jobs:
17+
build-and-deploy:
18+
runs-on: ubuntu-latest
19+
environment:
20+
name: github-pages
21+
url: ${{ steps.deployment.outputs.page_url }}
22+
steps:
23+
- uses: actions/checkout@v4
24+
25+
- uses: actions/setup-node@v4
26+
with:
27+
node-version: 22
28+
29+
- run: npm ci
30+
- run: npm run build
31+
32+
- uses: actions/configure-pages@v5
33+
34+
- uses: actions/upload-pages-artifact@v3
35+
with:
36+
path: dist
37+
38+
- id: deployment
39+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# DEVS x SESA Beginner Hackathon 2026
2+
3+
<p align="center">
4+
<img width="450" alt="header" src="public/read-me-header.png" />
5+
</p>
6+
7+
<p align="center">
8+
<img src="https://img.shields.io/badge/HTML-E34F26?logo=html5&logoColor=white&style=for-the-badge" />
9+
<img src="https://img.shields.io/badge/CSS-1572B6?logo=css&logoColor=white&style=for-the-badge&v=1" />
10+
<img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white&style=for-the-badge" />
11+
<img src="https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black&style=for-the-badge" />
12+
<img src="https://img.shields.io/badge/Node.js-25.x-green?logo=node.js&logoColor=white&style=for-the-badge" />
13+
</p>
14+
15+
## 💻 About
16+
17+
Hi 😊! This is the template repository for the DEVS x SESA Beginners Hackathon 2026. You’re welcome to make any changes, and you don’t have to stick with everything provided here. This is simply a starter using HTML/CSS/TypeScript that you can build on.
18+
19+
If you have any questions, don’t hesitate to ask for help! Otherwise, we wish you all the best and hope you have a great time ❤️!
20+
21+
## 🚀 Getting Started
22+
23+
**1. Clone the Repository**
24+
25+
```bash
26+
git clone <your-repo-url>
27+
```
28+
29+
**2. Open the Project**
30+
31+
Open the folder in your preferred editor.
32+
33+
**3. Install Dependencies**
34+
35+
Open the terminal inside your editor (or an external terminal!) and run the following command from the root directory:
36+
37+
```bash
38+
npm install
39+
```
40+
41+
**4. Run**
42+
43+
From the same directory, run the following command to start the app. You can then access it in your browser at the URL shown in the terminal (usually `http://localhost:5173`).
44+
45+
```bash
46+
npm run dev
47+
```
48+
49+
## ⚛️ React Fundamentals
50+
51+
### Components
52+
53+
Reusable components live in the `src/components/` folder. Components are simply functions that return JSX - which is just HTML-like syntax that describes what to show on screen.
54+
55+
A sample component that takes in a string/text and displays it would look something like this:
56+
57+
```typescript
58+
function MyComponent({ text }: { text: string }) {
59+
return (
60+
<div>
61+
<h1>{text}</h1>
62+
</div>
63+
)
64+
}
65+
66+
export default MyComponent
67+
```
68+
69+
#### Styling
70+
71+
To style a component, create a `.module.css` file next to it and import it. For example, in `MyComponent.module.css`:
72+
73+
```css
74+
.title {
75+
color: coral;
76+
}
77+
```
78+
79+
Then we can use it in our component with `className={styles.title}`, to style our text coral:
80+
81+
```typescript
82+
import styles from "./MyComponent.module.css"
83+
84+
function MyComponent({ text }: { text: string }) {
85+
return <h1 className={styles.title}>{text}</h1>
86+
}
87+
```
88+
89+
---
90+
91+
### Pages
92+
93+
Pages live in the `src/pages/` folder, each in its own folder (i.e. `src/pages/home/`). Pages are just components, however they often contain multiple components! Think of a page being a webpage that embeds multiple components!
94+
95+
For example, a page could use the `MyComponent` component above twice with different text:
96+
97+
```typescript
98+
import MyComponent from "../../components/MyComponent"
99+
100+
function MyPage() {
101+
return (
102+
<div>
103+
<MyComponent text="Hello!" />
104+
<MyComponent text="Welcome to my website!" />
105+
</div>
106+
)
107+
}
108+
109+
export default MyPage
110+
```
111+
112+
This creates a webpage that displays "Hello!" and "Welcome to my website!" in coral text 🪸
113+
114+
## 🌲 Project Structure
115+
116+
#### `main.tsx`
117+
118+
This file largely doesn't need to be touched! It's the entry point of the app 😄.
119+
120+
---
121+
122+
#### `App.tsx`
123+
124+
This is where routing lives. It maps URLs to pages. `/` shows `Home`, `/about` shows `About`.
125+
126+
If you want to add a new page, this is the place to do it! Create a new folder in `pages/`, import it here, and add a new <Route> pointing to it.
127+
128+
```typescript
129+
import PageName from "./pages/page-name/PageName";
130+
131+
// Then inside <Routes>
132+
<Route path="/your-path" element={<PageName />} />
133+
```
134+
135+
---
136+
137+
#### `Home.tsx`
138+
139+
The landing page. Displays the DEVS x SESA banner with the logo, three info cards, and a button to the API example page.
140+
141+
---
142+
143+
#### `ApiExample.tsx`
144+
145+
A page that demonstrates how to fetch data from an API. It uses the [PokeAPI](https://pokeapi.co/) to fetch a random Pokemon when a button is pressed. The left side shows the steps, the right side lets you try it out.
146+
147+
---
148+
149+
#### `Button.tsx`
150+
151+
A reusable pill-shaped button component that links to a page. Takes `text` and `to` as input.
152+
153+
```typescript
154+
<Button text="Click Me" to="/some-page" />
155+
```
156+
157+
## 🌏 Deployment
158+
159+
Your repository is automatically deployed via GitHub Pages. This means that it is live, and every time your main branch is updated, the site will be rebuilt and redeployed automatically!

‎eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { defineConfig, globalIgnores } from 'eslint/config'
7+
8+
export default defineConfig([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs.flat.recommended,
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>devs-sesa-beginner-hackathon-2026</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)