Phew! Well, I'm finally finished with my phase 4 FlatIron School project. This time we were tasked with creating a one-page application using JavaScript. For my project I decided to make an application called "Book Briefing" where users can leave book reviews and others can comment and like the reviews. This project was a big accumulation of everything we've learned so far and I definitely enjoyed building it. With that being said, I figured I'd share some tips that may help others!
Setting Up CORS
So right off the bat, this is definitely something you want to set up once you have all of your file structures created. CORS is important because this is what establishes your connection between your frontend and backend, without this set up, your program will not be able to run. So first thing you want to do is add the gem rack-cors to your GemFile. If you set up your backend using rails new, then you should just be able to uncomment it out and then run bundle install. Next, navigate to the config/initializers/cors.rb file, there you should uncomment out the following code:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
resource '*', headers: :any, methods: [:get, :post, :patch, :put]
end
end
This should properly establish your connection between your front and backend, now you'll be able to get on with coding!
Connecting Your Files
All of your files in the frontend of your application need to be connected to the index.html file. Essentially, your index.html file is where all your code will actually be rendered and your other files, in my case Comment.js, Review.js, and index.js is where mostly all of your code will live. These will obviously need to have interaction with one another, so the way that we do that is using a script tag.
<script src="index.js"></script>
<script src="models/Review.js"></script>
<script src="models/Comment.js"></script>
In the head of the index.html file I placed the three script tags with the source of each of the three files that need to be connected. The second two, are nested in a models folder hence why they have the models/ in front of the file name. This is all you have to do and now everything should be properly connected.
Combining Two Repos Into One
When creating this type of application, you will have a frontend and a backend, meaning that you will need to create two repositories. You can choose to combine your repositories at whatever point in your application that you would like, but it's preferable to do it before starting any coding in the chance that your pushes to GitHub might not appear after merging(which is a problem that I faced unfortunately). So after creating your frontend and backend repositories, you will then need to create a third repository that will become the parent repository to the other two. In my application I named my parent repository BookBriefing. Next, clone the parent repo onto your machine in your desired location and cd into it, opening it in your prefered code editor. Once you have that open, pull up your terminal and follow the syntax of:
git subtree add --prefix=rails git://github.com/rails/rails.git master Put the proper information corresponding to your project in the code snippet and enter into your terminal. Make sure to do this for both repositories.
git subtree add --prefix=book-briefing-api git@github.com:jessicaajosephh/book-briefing-api.git master
git subtree add --prefix=book-briefing-client git@github.com:jessicaajosephh/book-briefing-client.git master
As you can see, in mine I replaced it with the name of both repositories and then copied the SSH key of each. Once you do this, you can go to GitHub and see that both repositories should now be nested in the parent repository. Now you can code as usual, just make sure to cd into the proper terminals when pushing code to GitHub.
Future Planning
All in all, I'm very happy with the way my application turned out, but that's not to say that I don't want to add more to it. In the near future I plan on implementing user authentication so that both reviews and comments belong to specific users. I would also like to add a lot more styling and make it a better user experience with more features than just creating a review. I feel like all of the knowledge that I've learned so far has been wrapped up in this project, I can't believe I only have one more left!
You can check out my project repo if you would like at:
(https://github.com/jessicaajosephh/BookBriefing)
Top comments (0)