Keskitaso6-10 tuntia🌐 Web-sovellukset

Blogi-sovellus

Täysiverinen blogi kirjoittamiseen ja artikkeleiden hallintaan.

Teknologiat:Next.jsTypeScriptTailwind CSSSupabaseMDX

Aloitusprompt

Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.

Luo blogi-sovelluksen perusrakenne.

Tech stack:
- Next.js 14 App Router
- TypeScript
- Tailwind CSS
- Supabase (tietokanta, auth)
- MDX artikkeleiden renderöintiin

Tietokantarakenne:
- posts (id, title, slug, content, excerpt, published_at, category_id, author_id)
- categories (id, name, slug)
- comments (id, post_id, author_name, content, created_at)
- profiles (id, email, name, role)

Sivut:
- / (etusivu, uusimmat artikkelit)
- /blog (kaikki artikkelit, filtteröinti)
- /blog/[slug] (yksittäinen artikkeli)
- /admin (suojattu admin-paneeli)

Aloita tietokantarakenteesta ja API-funktioista.

Ominaisuudet

Tässä projektissa rakennetaan seuraavat ominaisuudet:

1Markdown/MDX artikkelit
2Kategoriat ja tagit
3Hakutoiminto
4Kommenttijärjestelmä
5Admin-paneeli
6RSS-syöte
7SEO-optimointi

Vaiheet

1

Projektin ja tietokannan perustaminen

Luo Next.js-projekti ja Supabase-tietokanta.

Prompti:

Luo Next.js 14 blogi-projekti TypeScriptillä. Konfiguroi Supabase-yhteys ja luo taulut: posts, categories, comments. Lisää tarvittavat tyypit.
2

Artikkeleiden listaus

Luo etusivu joka näyttää artikkelit.

Prompti:

Luo BlogList-komponentti joka hakee ja näyttää artikkelit Supabasesta. Näytä otsikko, tiivistelmä, päivämäärä, kategoria ja lukuaika. Lisää sivutus.
3

Yksittäisen artikkelin näkymä

Rakenna artikkelin lukusivu.

Prompti:

Luo dynaaminen sivu /blog/[slug] joka näyttää yksittäisen artikkelin. Renderöi MDX-sisältö, näytä kirjoittaja, päivämäärä, tagit. Lisää sisällysluettelo.
4

Admin-paneeli

Luo ylläpitonäkymä artikkeleiden hallintaan.

Prompti:

Luo suojattu admin-paneeli osoitteeseen /admin. Sisällytä artikkelilista, uuden artikkelin luonti, muokkaus ja poisto. Käytä Supabase Authia autentikaatioon.
5

Hakutoiminto

Lisää artikkeleiden haku.

Prompti:

Luo hakutoiminto joka etsii artikkeleita otsikon ja sisällön perusteella. Lisää debounce ja näytä tulokset reaaliajassa. Käytä Supabase full-text searchia.
6

Kommenttijärjestelmä

Lisää artikkeleihin kommentointi.

Prompti:

Luo kommenttijärjestelmä artikkeleille. Käyttäjä voi jättää kommentin nimellä ja viestillä. Näytä kommentit artikkelin alla. Lisää moderointitoiminto adminille.

Laajennusideat

Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:

  • Lisää newsletter-tilaus
  • Sosiaalisen median jako-napit
  • Lukuajan arviointi
  • Artikkeleiden versiohistoria
  • Ajastettu julkaisu
  • Analytiikka-dashboard

Lisää projekti-ideoita

Selaa kaikkia web-sovellukset projekteja tai tutustu muihin kategorioihin.