Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adeonir/ghibli-remix
A small project to list movies using the Ghibli API
https://github.com/adeonir/ghibli-remix
figma remix-run tailwind-css typescript
Last synced: 3 months ago
JSON representation
A small project to list movies using the Ghibli API
- Host: GitHub
- URL: https://github.com/adeonir/ghibli-remix
- Owner: adeonir
- Created: 2022-02-24T02:40:34.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-25T17:47:28.000Z (almost 2 years ago)
- Last Synced: 2023-03-06T05:40:33.986Z (almost 2 years ago)
- Topics: figma, remix-run, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://remix-ghibli-adeonir.vercel.app
- Size: 1.5 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Welcome to Studio Ghibli Films
A small project, based on this [Remix.run crash course](https://www.youtube.com/watch?v=HOlYQu_r4Io), using the [Ghibli API](https://ghibliapi.herokuapp.com).
I've also created a simple design in Figma for this project using Tailwind tokens, you can view it [here](https://www.figma.com/file/TJbiqMb4Ha3OEDskctRyVm/Studio-Ghibli/duplicate).
You can see the demo [here](https://remix-ghibli-adeonir.vercel.app).
## Preview
**Home page**
**Film page**
## Getting Started
1. Download this repo:
```bash
npx degit adeonir/remix-ghibli remix-ghibli
```
2. Install dependencies:
> Before anything, you need to have [pnpm](https://pnpm.io/) installed on your machine.
```sh
pnpm install
```
2. Add `.env` file:
```sh
cp .env.example .env
```
3. Run the server:
```sh
pnpm dev
```
This starts your app in development mode, running at `http://localhost:3000` and a json-server at `http://localhost:3001`.
The json-server is used to mock the comments API locally.
4. In a separate terminal, run the tests:
```bash
pnpm watch
```
### What's inside
- [Remix](https://remix.run)
- [ReactJS](https://reactjs.org)
- [TypeScript](https://www.typescriptlang.org)
- [Tailwind CSS](https://tailwindcss.com)
---
Made with ♥️ by Adeonir Kohl