search

CodingGarden / seedling-school-01-frontend-project

For your first project, you will build a frontend website with HTML, CSS and JavaScript. The website will communicate and integrate with a 3rd party Web API.
MIT License
106 stars 15 forks source link

[Need Help] Popular on Letterboxd - Project Submission #27

Open JorgePasco1 opened 4 years ago

JorgePasco1 commented 4 years ago

Project Name / Title

Popular on Letterboxd

Your Name / Title

Jorge Pasco

Project Description

A website where you can find the most viewed and liked films/film lists from the movie-enthusiast community of Letterboxd.com. Coding Garden's Seedling School 01

https://github.com/JorgePasco1/Popular-on-Letterboxd/blob/master/README.md

What 3rd Party Web API do you plan to use?

Letterboxd API

Which of the following describes you:

JorgePasco1 commented 4 years ago

Project Started!

JorgePasco1 commented 4 years ago

Progress

Finally got some time to work on my project. I started to work on the wireframes on XD and finished landing pages for both desktop and mobile. I probably took way too much time on trying to figure out a good color scheme, because one of my goals is to use Material Design concepts; still not 100% convinced of my choice, but I think it looks decent.

Wireframes

I'm leaving captures of both the wireframes mentioned so you guys can say what you think about it and maybe recommend a nicer color scheme. Thanks!

Desktop Landing Page

Desktop - Landing Page

Mobile (Iphone X+) Landing Page

Mobile - Landing Page

JorgePasco1 commented 4 years ago

Finished Wireframes

Once again it took my a long to wireframe the app page, but I'm liking the result :smile:

Desktop (1920 x 1080 - Scrollable)

Desktop - App (Films)

Mobile (Iphone X+ - Scrollable)

Mobile - App (Films)

mahendrjy commented 4 years ago

I like it other than colors

I use these sites for design, colors and fonts inspiration

Design Inspiration

For Colors, I use these sites

For Fonts

w3cj commented 4 years ago

Looks great! Can't wait to see the finished product.

w3cj commented 4 years ago

Any updates to share?

JorgePasco1 commented 4 years ago

@w3cj Got time to make some progress. I've finished the landing page and the app (non-responsive) desktop layout. It's deployed here: https://dist.jorgepasco1.now.sh/

I would like for you to give some feedback, either for the UI or the code (in this case, you might wanna download a copy of my repo, as the deployed web is a production version. Thanks in advance! I'm having a lot of fun with this project.

JorgePasco1 commented 4 years ago

Need a lesson on a topic

Hey @w3cj. I'm not sure if I can actually use the Letterboxd API as expected. I can't seem to find links for the endpoints, and I have no idea of how OAuth 2.0 works. Can you please explain this sometime? Thanks!

w3cj commented 4 years ago

@JorgePasco1 It looks like the API requires an api key / secret and you have to request one by email: https://letterboxd.com/api-beta/

However, even if you get an api key, the API is not setup to be requested from the client (the Access-Control-Allow-Origin header is not set), it would require a backend server / proxy.

The letterboxd site is really cool. I had never seen it before. I decided to create a basic API that scrapes the list pages. If this works for you, I could create endpoints for searching, listing films and listing all movies in a list as well:

https://letterboxd-api.now.sh/lists
...
https://letterboxd-api.now.sh/lists/popular/this/all-time/page/1
https://letterboxd-api.now.sh/lists/popular/this/all-time/page/2
...
https://letterboxd-api.now.sh/lists/popular/this/week/page/1
https://letterboxd-api.now.sh/lists/popular/this/week/page/2
...
etc.
JorgePasco1 commented 4 years ago

That would be awesome, CJ! Thank you very much 🤩. I’ll work on the site ASAP. It would be great if you could do a lesson on how to create APIs like you did for these, some time. Thank you again!