Project: Final Project

Introduction

I hope you enjoyed this course and the projects you’ve completed. This isn’t just the end of the Javascript projects, but all the programming course projects! It represents the entire spectrum of knowledge you’ve acquired so far (which is a whole lot).

The Where’s Waldo project was a particularly integrated one, but this project is the first time you will put everything together and build a full website. To do so, you will clone your favorite website.

This is a fantastic exercise because it allows you to build something meaningful and impressive without worrying about coming up with a full site on your own. When you show employers, they’ll likely already have experience with the site and you can focus on the technical implementation details instead of why you chose to build another social network for cats.

Assignment

Copy your favorite website as well as you can. Pinterest, Facebook, Twitter… Just make sure it’s got lots of interesting functionality. You’ll be integrating your full array of Rails and Javascript skills into this one. This should prove to you that you now have all the tools you need to build a website just like the ones you use every day.

Of course, you can’t copy every single feature and a lot of the user interface will be a bit clunkier, but you can get yourself 80% of the way there. And that’s darn impressive.

  1. Set up a Github Repo for this project. Follow the instructions atop the Google Homepage project if you need help.
  2. Think about what you’ll need to do to get this all working together. This is where it’s really helpful to think it completely through on paper or whiteboard ahead of time! A few hours of thought here will save you from wasting days of coding. Try to lay it ALL out. An important part of this is scope – you obviously can’t build the entire website (which presumably took a full team of engineers years to produce), so you’ll need to identify the core functionality of the site and then the “nice-to-have” stuff. Make sure you will finish building the core functionality BEFORE starting to add on the rest. If you try to do it all at once, you’ll get lost and frustrated. Trust me. Everything takes longer than you expect.
  3. Build it!
  4. Try testing the very high level Javascript and Rails functionality with Jasmine and RSpec respectively. Don’t get too bogged down in testing, but try and save yourself time by adding high level tests so you don’t need to click around 100 times every time you make a change to something that seems important.
  5. Once you’ve finished, push to Github and definitely submit your project below!

Congratulations!

Student Solutions

To add your solution to the list below, edit this file (located on The Odin Project’s “curriculum” github repository). See the section on Contributing for more instructions.

Show Student Solutions

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

Javascript

Project: Final Project

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship