/mern-stack-guided-project

A series of challenges and examples to get beginners going with building full-stack MERN apps. Master branch comes with the basic dependencies needed to get going.

Primary LanguageJavaScript

This is the backend repo for a GADS guided project supported by @manimanis and @nnadozie, and open to more example solutions and course recommendations from mentors.

By the end of challenge 3 you should have these endpoints and/or similar ones up and running using express and mongodb/postgress:

Uber Clone

Brief: Build an uber.com homepage with the select preferred language feature.

  • Using the Google translate API is not allowed.

  • Assume a translator was employed to translate the text into different languages and provided you the output in txt format.

  • You have to be able to save and update this text to a dB (either mongodb or postgres) using post or put requests.

  • The text must be retrieved using get requests, in JSON format and used to populate the homepage.

  • There can be no hard-coded text on the homepage.

Here's what to expect:

  • We'll be using an example, challenge structure.

  • Note: the examples are in no way ideal solutions, but they are intentionally barebone for easy comprehension.

  • That is. It's structured as a series of small-sized challenges, and you'll be given examples along with the challenges.

  • I hope this will prompt learners to ask questions and figure out a lot of things on your own.

  • We're starting with backend challenges, before moving to the front end.

There'll be personally reviewed recommended courses that help guide you along. You can expect that we'd have done these courses to assess them before recommending.




CHALLENGE 1 (Rating: Easy)

Set up an express node app.

Expectations

  • Can access the app in development mode from localhost:8080/

  • App can automatically refresh when code changes are made, using nodemon.

  • Please share progress of your work on our slack team channel

Recommended course: Sections 1 to 4 of "Building Web Applications with Node.js and Express 4.0 (UPDATE)" https://app.pluralsight.com/library/courses/c76a348d-4fa2-4925-ae8c-d66edba14b75

Note: when following along with courses install the versions of software used in those courses to avoid getting frustrated by incompatibility issues. You may get vulnerability warnings which you can fix using npm audit fix if you want to.




CHALLENGE 1 Example

  • Try not to peep till you've attempted the challenge.
  • View or download on the challenge-1 branch.
  • Time spent: 5 - 10 mins
  • Why so simple? This is a no-frills introductory guided project. Don't get bogged down by tooling and excessive set-ups. Or better yet, just think of it like a hackathon or PoC, where you have really little time to accomplish your brief.
  • Why did we do this challenge?
  • 1: we're using express to build our app. Express is one part of the popular MERN (mongodb, express, react, node) stack.
  • 2: we really do not want to have to restart our app after every code-change we make, hence nodemon.

*NOTE: PRs with new examples are more than welcome.




CHALLENGE 2 (Rating: Medium)

I hope we all began our guided project by setting up our express-nodemon app. Now we'll be challenged to set up our endpoints. Here we go!

  • Create an endpoint for /. I mean, localhost:8080/ hint: a get endpoint.
  • Let it return anything, some text, an image, anything. The point is, get an endpoint working.
  • Then think about how many languages you want to support( I recommend just two, maybe English and Japanese)
  • Create an endpoint localhost:8080/jp/ja and another localhost:8080/ng/en, that return the Japanese and English equivalent respectively, of the text on Uber.com's hompage in JSON format.
  • NO database needed just yet. Rating: medium, because you'll need to figure out how to format the json.

NOTES

For those of you wondering how to get the text, please simply copy them from the existing website. You can toggle the languages by first selecting a city where the language is spoken, e.g Tokyo for Japan, and then selecting preferred language. At the footer of the website

image 1 image2

We'll be rounding up with our backend endpoints over the weekend with Challenge 3. Happy coding!




Challenge 2 Example

*NOTE: PRs with new examples are more than welcome.




Challenge 3 (Rating: Hard)

  • Estimate: 5 hours min for a beginner.
  • Set up your preferred database, either sql (postgres) or nosql (mongodb). Mongodb recommended.
  • Migrate the language text files to your db using a schema of your choice. You should have a put or post endpoint to store the language text assets in your db.
  • Update your code to fetch the language text files from your db and make sure the endpoints work just as before.

Why do this challenge?

  • Get familiar with databases. Every app is database -> backend code -> front-end code.

Recommended course

Note: when following along with courses, install the versions of software used in those courses to avoid getting frustrated by incompatibility issues.

After challenge 3 we'll be moving on to front-end work!




Challenge 3 Example Solutions

  • Try not to peep till you've attempted the challenge.
  • Two examples provided for this challenge. View or download on the challenge-3 branch, and challenge-3.1 branch (where @manimanis builds on challenge-3 to provide imports from the language text file).
  • Deployed here to tinker with: https://uber-clone-c3.herokuapp.com/intl Check out the endpoints: /jp/ja, and /ng/en. They should be the same as challenge 2.
  • There's a new endpoint /intl, that takes over from /.
  • Can you run it locally and send a put request to /intl with your textfile content as the payload using postman?

*NOTE: PRs with new examples are more than welcome.

Using the APIs to populate the DB

Before.

Checking get /intl, /jp/ja, and /ng/en to see the dB is empty.

Uber Clone

During

Using put requests to /intl, /jp and /ng to populate the dB.

Uber Clone Uber Clone

After

Checking that the resources were correctly created.

Uber Clone




Head over here for challenges 4 - 6