Putting It All Together

At last! We can now build both the front- and backend of a website and use JavaScript on both sides! To bring it all together, let's build a small web application that uses an Express API with a React frontend and MongoDB.

For our final project, we'll use our skills to create a database-backed travelogue or travel journal, complete with photos and stories. Our approach will be to take this from an initial visual layout, all the way through to the front- and backend code. If your HTML/CSS skills aren't great, don't worry: the code is provided for you at multiple instances so you can begin working on your project where you'd like.

The following topics will be covered in this chapter:

• The project brief
• Scaffolding – React
• The backend – setting up our API
• The database – all CRUD operations

Technical requirements

Be prepared to work with the code provided in the chapter-19 directory of the repository, at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-19. As we'll be working with command-line tools, also have your Terminal or command-line shell available. We'll need a modern browser and a local code editor.

The project brief

When beginning a real-world web project from start to finish, it's important to gather the requirements up front. This can be presented in many forms: a verbal description, a bulleted list of features, a visual wireframe, a complete design document, or any combination of these. When examining requirements, it's important to be as explicit as possible in order to minimize miscommunication, redundant or abandoned work, and a streamlined workflow. For this project, we'll begin with visual comps.

If you've ever worked with a graphic designer, you're probably familiar with the term comp. A visual comp, short for comprehensive layout, is a design artifact that is a high-fidelity visual representation of the desired end state for a project. For example, a print project's comp would be a digital file with all the required assets ready to send to the printer for immediate use. For digital work, you may receive Adobe Photoshop, XD, or Sketch files...

Scaffolding – React

Our project is a prime candidate for using React for our frontend, so let's outline our requirements for the frontend: One single React application with reusable components and Hooks and context for state saving. Hooks are a new concept compared to our previous use of React. Added in React 16.8, Hooks are functions that allow you to manipulate the state and context for state management within a functional component.

In addition to our handcrafted React app, we'll incorporate a few additional pre-built libraries to simplify our project and to utilize ready-made tools. D3.js is a powerful graphics and data visualization library that we'll leverage for our map. Quill is a rich text editor that will allow you to write the entries with text formatting, and upload and place photos.

It's up to you to decide whether you'd like to start with npx create-react-app or use the scaffolded code provided in the Step 1 folder in the chapter-19 directory...

The backend – setting up our API

Let's catalog the endpoints we'll need to make our travelogue work:

• Read (GET): Like most APIs, we'll need an endpoint to read entries. We won't force authentication or being logged in for this.
• Write (POST): This endpoint will be used for both creating a new trip and editing existing ones.
• Upload (POST): We'll need an endpoint to call from our frontend in order to upload photos.
• Login (POST) (Optional): If you'd like to take your authentication into your own hands, create a login endpoint that can use credentials from the database or a social-media login endpoint.

• Media (GET) (Optional): It will be useful to have an API that lists all of the media files uploaded to your server.
• Countries (GET) (Optional): It will also be a good idea to have an endpoint specifically for listing the countries you've visited to power your world map.

You may find yourself creating more endpoints as you work, and that's...

The database – all CRUD operations

We will, of course, need a datastore for our create, read, update, and delete functionality, so let's return to MongoDB in order to store these documents. You can refer back to Chapter 18, Node.js and MongoDB, if you need to refresh your memory on getting set up.

To get started with setting up a database from scratch, it helps to think of the database structure that you intend to use. While MongoDB doesn't require a schema, it's still a good idea to plan your MongoDB documents so that you're not being arbitrary with functionality or naming between sections.

Here's an idea of what each collection might look like:

settings:  {
  user
    firstname
    lastname
    username
    password
  title
  URL
  media directory
}

entry: {
  title
  location
  date
    month
    day
    year
  body
}

location: {
  city
  region
  country
  latitude
  longitude
  entries
}

It's good to keep your database simple, but remember that you can always expand on...

Summary

Now, of course, I couldn't just hand you a final project, could I? In this chapter, we scaffolded our travelogue—the rest is up to you. There are a few pieces yet to do to have a fully functional project. After all, we haven't fully adhered to our visual comps, have we? Here are some ideas of what kinds of functionalities to implement in order to complete the project:

• Persist information to the database.
• Work on image uploading and saving.
• Edit existing articles.
• Create the countries endpoint to populate the D3.js map.
• Enable true login.
• Streamline the user journey.

When complete, this project will be a piece for your portfolio to show how you, a Python developer, mastered JavaScript. From the beginnings of datatypes, grammar, loops, and Node.js, to finally creating a fully functional project, you've come a long way.

It's with gratitude that I thank you for accompanying me on this journey! Keep learning, and live long and prosper.

Further reading

A useful resource on the differences between functional programming and object-oriented programming can be found at https://www.geeksforgeeks.org/difference-between-functional-programming-and-object-oriented-programming/.