For my JavaScript project, I wanted to do something involving a list with many hidden pop-up features. I have always been really interested in the top ten lists and their popularity fascinating. It is almost as if someone puts the top 10 anything I will automatically click on the link. So I thought to myself and decided to make an app where you can put your own spin on top 10 lists and make and share your own. Starting my app, I knew the main component I would want to have was a has many relationship between a list and a movie. The list would have many movies, but a movie would only belong to one list. After I had figured out my two classes, I wanted to create the next step was deciding on their attributes. For a list class, it would have a title and a description, this way you can name your list and tell people a little about the list you were creating. For a movie, I would similarly have a title and a description but also add a rating this was so you could rate the movie as well to let people know the quality of the film on your list. After I had decided on the attributes for both of my classes, it was time to start building out my app. When I began, I knew I was going to need a back end and a front end for this project, I built two files one for each section. I started on the backend first to make sure the API I was going to build worked before I moved on to the front end of the project. I used a a scaffold to build out my movie and model from the back end then made adjustments such as making sure the belongs to and has many relationship was working, adding validations/error messages, and making sure my params were correct for building and editing my model for the API. After I had my backend working for both lists and movies it was time to bring that information to the front end of my app using JavaScript. For the front end of my document, the first thing I decided to do was build out my folders my js folders for both classes and an index.js folder for the main webpage information. I also made my HTML, images and CSS files on the front end as well. Once I had the skeleton of my app figured out it was time to fetch some data from my newly created API. I started with a list since movies belong to a list. I created a fetch request to my list API and used by debugging tools like console.log to make sure the fetch was working properly. I then moved on to my next step which was rendering my list and appending it to the DOM. To do this I made a list class with a constructer and made list methods to render the list using the keyword this. I then jumped back into my index.js to create form/function, delete function, and the functionality behind creating, editing, and destroying a movie. It was a lot of trial and error and using different methods but I eventually was able to make my movie list app work. The biggest hurdle for me was understanding the front end and backend relationship and what parts to put in each to make the app the most functional. Building this app was definitely an adventure for me, and I can’t wait to practice and make more.