Skip to content

midudev/esland-web

Repository files navigation

The ESLAND page re-imagined

Created for didactic and educational purposes.

Astro Badge GitHub stars GitHub issues GitHub forks GitHub PRs Tailwind CSS Badge

Warning

This page is not official. The official page is premiosesland.com.

🛠️ Stack

  • Astro - The web framework for content-driven websites.
  • Typescript - JavaScript with syntax for types.
  • Tailwindcss - A utility-first CSS framework for rapidly building custom designs.
  • tailwindcss-animated - Extended animation utilities for Tailwind CSS.
  • fontsource - Self-host Open Source fonts in neatly bundled NPM packages.

🚀 Getting Started

  1. Fork or clone this repository.
git clone git@github.com:midudev/esland-web.git
  1. Install the dependencies:
  • We use bun to install and manage the dependencies.
# Install bun for MacOS, WSL & Linux:
curl -fsSL https://bun.sh/install | bash

# Install bun for Windows:
powershell -c "iwr bun.sh/install.ps1|iex"

# Install with bun:
bun install
  • or you can use pnpm:
# Install pnpm globally if you don't have it:
npm install -g pnpm

# Install dependencies:
pnpm install
  1. Run the development server:
# Run with bun:
bun dev

# Run with pnpm:
pnpm dev
  1. Open http://localhost:4321 with your browser to see the result 🚀

🤝 Contributing

🔑 Get your Twitch client ID and secret

Before being able to initialize the application, you will need to obtain your client ID and client secret from Twitch.

First, you must to go to dev.twitch.tv

Once you're there, you should to click on the button that says 'your console' in the upper right corner.

home page of dev.twitch.tv

When you're in the console page. You create a new app in the 'apps' section and press the button that say's 'register your app'

create your twitch app

Then you'll need to register your app. Fill the fields as teh follow example and click the 'create' button.

fill the fields

After that, the page will redirect you to the admin panel. Look for the application you just created and click on the 'manage' button.

control panel

You'll go to the same page where you were when you registered your app. Scroll down, and you'll find your client ID as shown below:

get the id

Finally, you'll need your client secret. Below the place where you obtained your client ID, you'll find the 'new secret' button; click on it to get your secret.

get the secret

Don't forget that add it to your .env file

🧞 Commands

Command Action
⚙️ dev or start Starts local dev server at localhost:3000.
⚙️ build Build your production site to ./dist/.
⚙️ preview Preview your build locally, before deploying.

✅ Por hacer...

  • Mejorar diseño de la página "Info"
  • Añadir funcionalidad de ganadores de pasadas ediciones
  • Mejorar la precarga de las imágenes de las siguientes secciones en idle
  • Pestaña para cambiar entre ediciones en la página "Archivo"

👀 Lo haremos en directo en Twitch

  • Base de datos para las votaciones
  • Backend para las votaciones