Studio Ghibli Tracker

Track and rate your favorite movies from Studio Ghibli

Key Features • How To Use • Demo • Specifications • Credits • Collaborators

Key Features

Register to the platform with your email, Twitter, or Facebook account.
Browse for your favorite movies listed on the homepage.
Sort the movie list by year, duration, Rotten Tomatoes audience Score, star rate, and emojis.
See detailed information about each movie.
You can track the movies you've watched by checking them as "seen".
In your profile, you can view the average star rating you've made.

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/thomasnrggo/Ghibli-tracker-client.git

# Go into the repository
$ cd ghibli-tracker-client

# Install dependencies
$ npm install

# Run the app
$ npm run dev

Demo

Ghibli Tracker

Specifications

Inputs

Text

In order to use the global styles for text fields you need to do the following pattern:

<div className="input__container">
    <label htmlFor="email" className="input__label">
        Label name
        <input
            type="email"
            name="email"
            id="email"
            className="input"
            placeholder="Your email here..."
        />
    </label>
</div>

If you want to use the styles for success and error state just add the class .input-error or .input-success to the .input__container div:

<div className="input__container input-success">

There's also a helper text if you want to share some instructions to the user. Just add under the <label> tag a <p className="input__helper"> tag with the specified class like this:

<div className="input__container">
    <label htmlFor="email" className="input__label">
        Label name
        <input
            type="email"
            name="email"
            id="email"
            className="input"
            placeholder="Your email here..."
        />
    </label>

    <p className="input__helper">Your helper text here.</p>
</div>

Credits

This site uses the following open source packages:

React.js 17 • Building the UI
Next.js 10.2 • Managing performance and SEO with SSR and SSG
Jest 26.6 • Testing
Vercel • Deployment

With the supervision of Erik Ochoa, Academic Coach at Platzi Master

Collaborators

This app was created with 💚 by:

Anthony Gonzalez · thomasnrggo.com · Web Designer · Frontend Developer · GitHub @thomasnrggo · Twitter @thomasnrggo

Juan Daniel Martínez · juanda.dev · Frontend Developer · GitHub @juandadev · Twitter @juanda_dev_

Jonathan Reyes · Frontend Developer