Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/victorcodess/flixify

Flixify lets you seamlessly explore movies and TV series, add bookmarks, and search across all pages. It offers user authentication along with a theme switch.
https://github.com/victorcodess/flixify

next-auth nextjs postgresql prisma react react-hook-form tailwindcss typescript

Last synced: about 1 month ago
JSON representation

Flixify lets you seamlessly explore movies and TV series, add bookmarks, and search across all pages. It offers user authentication along with a theme switch.

Awesome Lists containing this project

README 

        
# Frontend Mentor - Entertainment web app solution



This is a solution to the [Entertainment web app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/entertainment-web-app-J-UhgAW1X). Frontend Mentor challenges help you improve your coding skills by building realistic project.



## Table of contents



- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)



## Overview



### The challenge



Users should be able to:



- View the optimal layout for the app depending on their device's screen size

- See hover states for all interactive elements on the page

- Navigate between Home, Movies, TV Series, and Bookmarked Shows pages

- Add/Remove bookmarks from all movies and TV series

- Search for relevant shows on all pages

- **Bonus**: Build this project as a full-stack application

- **Bonus**: If you're building a full-stack app, we provide authentication screen (sign-up/login) designs if you'd like to create an auth flow



### Screenshot



![](https://github.com/victorcodess/flixify/assets/84178696/e988a0e7-cd95-4f9f-a45f-a9293c850133)



### Links



- Solution URL: [Solution](https://your-solution-url.com)

- Live Site URL: [Live Site](https://flixify.victorwilliams.me)



## My process



### Built with



- React

- TypeScript

- Tailwind CSS

- Next.js

- Next Auth

- Prisma

- PostgreSQL

- React Hook Form



### What I learned



This was the first time I worked on a full-stack web application, so I got learn a lot about interacting with databases. I built the UI from the Figma file, and implemented all of the functionalities using ```Next.js``` and ```Tailwind CSS.``` I learnt how to use ```Prisma``` to interact with both a local ```sqlite``` database and a deployed ```postgresql``` database. I also learnt how to implement user authentication with custom log-in/sign-up pages using ```next auth.``` I learnt how to use ```react hook form``` to manage form data and validate the form values. I also learnt how to implement a theme switch using ```Tailwind CSS``` and ```next-theme.``` In all, this was a great learning experience for me as a frontend engineer.



### Continued development



I still intend on continuing this project and expanding on some of it's features. I plan on adding an external movie API, as I'm currently making use of a dummy local JSON file. Then I would include some other features like watching videos and seeing more details about the movies.



### Useful resources



- [Full Stack Authentication with Next-Auth and Next.js 13: All You Need to Know](https://www.youtube.com/watch?v=0eu4_lLFkGk&t=527s) - This helped me while implementing the Authentication for the web app. I'd recommend it to anyone trying to laern authentication with Next Auth.



## Author



- Website - [Victor Williams](https://www.victorwilliams.me)

- Frontend Mentor - [@victorcodess](https://www.frontendmentor.io/profile/victorcodess)

- Twitter - [@victorwill__](https://www.twitter.com/victorwill__)