Help with a Project / tutorial recommendation

I got sent this trial task after an interview a while back and couldn’t really figure it out: Still, I’d like to understand it and figure out how to put it together.

When I first run it I get a

    throw err;

and then when I fix it, I think, by changing the path from …/data/ to …/data/users in the users-service.js I get a Cannot Get / error.

Can someone point me in the right direction or recommend a tutorial that may help me out in better understanding this (the project as a whole)?

I ran it on my side with no issue. This is what I did
step 1. Git clone
step 2. yarn install
step 3. yarn start

Like @Tchoukoualeu, I ran it on Windows 10 with npm just fine.

  1. git clone js-trial-task
  2. cd js-trial-task
  3. npm install
  4. npm start

To verify, directing a web browser to – http://localhost:3000/api/search?length=1
should return a JSON list with 1 object. I then used the id from that object to test the api/profiles route at http://localhost:3000/api/profiles?ids={replace_this_with_id} which returned one JSON profile object.

Unless something really isn’t building right on your system, I’m not sure you need to be modifying any of their data paths. Either way, the Cannot Get / error response message you’re getting is supposed to be like that. There is no “/” route or webpage being served yet, only the two “/api/” endpoints. So the only real bit of their code I could see needing to change, is adding an index route to serve your front-end, in index.js.
Something like:

// index.js
// Theres a big block of express statements at the end
    .use(express.static('/yourStaticFolder'))  // configure the app to use any assets
    .use('/', function (req, res) {
        // add the index route and serve your index page
    .listen(process.env.PORT || 3000, ...);

As for the right direction to go in, first I’d get the server running locally and get comfortable with the 2 API endpoints they provide for your App to use. Then I’d start thinking about how to build the front-end. Are you going to use a front-end framework like React, or build it from scratch?

One requirement I think should be noted from the readme is

Include your git history when you send us your code

It sounds like this is a learning exercise now, so it might not be a big deal to you. However if you want the full experience I’d create a new github repository (or whatever git based cloud) and keep it updated as you move through the project.

Awesome, thanks for the response! It’s starting up successfully now. I’ve gotten as far as going to http://localhost:3000/api/search?length=1 and http://localhost:3000/api/profiles?ids={replace_this_with_id} to successfully view what’s returned.

The confusing part for me is I’m really at a loss on how to connect everything. I’m not sure if you’re familiar with Andrei Neagoie’s courses but probably the most relevant experience I have with something like this is in his ZTM course. So, right now, I’m referencing the RoboFriends project because I’d like to create a similar interface.

In the final project of that course, you build an API yourself. In that section, the front-end and back-end are in two separate folders so right now I just have create react app open in a separate folder running on a different port as this project - not sure if that’s the preferred way to put this together.

So yeah, maybe that gives you an idea on where I’m at with all this in further advice. Your previous response really helped me understand this better already so thanks for that!

Nice! So it’s on to the front-end.

I’m not familiar with that course, but it looks similar to the Node + ExpressJS back-end & React front-end model used in the FCC courses.

This is my method for using create-react-app with a back-end; there are other, particularly more server “hot-reload” equipped strategies out there.

Start with a proxy attribute in the react app’s package.json. The creator’s can explain it better than I can. You’d want to proxy to port 3000 since that’s what the express server they made is using. It may not even be truly necessary as I think CRA’s default port is 3000 anyhow, but it’s good practice I guess. I find it easy to just feed the server start script another port to use (PORT=4000) during development, and keep the React app at it’s default but it’s whatever works for you.

You’ll need to tell the express app where the assets and index page are located in relation to itself. This goes back to that index.js modification I noted above. For React apps the static folder to point to is the build folder. The Path module and the __dirname variable are useful here for constructing directory paths.

The server needs to be started after building the React app.

A basic workflow for me would be to open a shell and navigate to the create-react-app then npm start. I’d make any changes to the front-end I needed then terminate the CRA dev server. Then npm run build. Next, navigate to the the server folder and start it up, in this case it happens to be the same as the React app, npm start. Finally it’s to the browser at port 3000 again to check out how it runs using the server.

As for “how to connect everything,” you have a lot of options. They’ve already wired up the server for you, so you’re really just telling the React app to fetch the data from certain API end-points and then display it somewhere within the app. The easiest options, IMO, are fetch or XMLHttpRequest.
Something like:

// Somewhere inside the main React App Class
componentDidMount() {
    // arbitrarily load the search API results on mount
    // this could also go in a button onClick or whatever else
    const xhr = new XMLHttpRequest();  // Why not pick the most verbose option
    const searchLength = 12,
          searchSort = 'DISTANCE';`/api/search?${searchLength}&sorting=${searchSort}`)  // The search API URL
    // Callback to execute when response is recieved from server
    xhr.onload = async () => {
        const data = await JSON.parse(;
        // You probably want to validate and clean any response data first, in reality
        this.setState({ resultsToDisplay: data });  // Store JSON data in app state

Maybe have the “/api/profile” endpoint called in a similar way on a mouse event (click or hover) for each result?

Cool, thanks for your help. I’m gonna try to get started on this and will probably have more questions, ha. To clarify though, you’re saying you would keep the back-end and front-end in separate olders - i.e. clone their repo and put it in a “back-end” folder on your desktop and then create a react app called “front-end” on your desktop. Then open them up and run them at the same time?

Yes, you can keep them in separate project folders. I would.

Normally, an easy solution I use is to start by cloning the repo with the server and use its root folder as the main project folder. I usually make a new create-react-app inside the main project folder so it’s a little easier to tell the server what paths to look at for serving the App, but keeping them as two separate folders should be fine too. I will say that having one root folder for your project will make working with git much easier though

The catch with using CRA for something like this is that regardless of how the directory structures look you’ll now have two separate package.json files, one for the server and one for the React app. The biggest choice is going to be whether to merge the projects together or keep them separate. If I was building a project from the ground up, I’d probably want to ensure there was just one package.json for simplicity. But here, you’re working with an existing code base and it might very well be better to keep the worlds apart.

This means if you’re in the server folder and issue the command npm start it will follow the “start” script in the server’s package.json (which reads: "node ./index | bunyan"). This will start the Express server located at /index.js.

If you’re in the create-react-app folder and issue npm start it will direct to the React app’s package.json and run "npm react-scripts start" which starts a development server with hot-reload for you to work with. When running from the dev server though, none of the api endpoints from the Express Server are going to be accessible. Ideally the proxy changes that for development.

As such, you can design the React app using the dev server, but to use it with the Express server you first need to build (npm run build) the React app so that the React build folder with all the site assets is accessible to the Express server.

So truthfully, you’re not really running them at the same time, but in series.

There are ways around this, but most of them require some good modification between deployment and production. I chose this method to hopefully alleviate some of that.

Seriously, thanks so much for your help with this. I posted in a good few many places and didn’t really get any responses that were as helpful.

I also found a tutorial that’s really good on this subject so far: Currently I’m in part 2 and configuring my express server now.

If you’re in the U.S. and have a library card then you can access (same as LinkedIn Learning) for free.