React Project Five Application Overview
Hi, welcome back to the react course. In this set of guides we are going to be building out the dailysmarty front end application.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So I'll just head over to the design here, I have it opened already and basically the idea of this app is just the front end that we will be connecting to an API basically to fetch certain things(data). So this is the first screen and there's two screens and some different functionalities on each screen.

large

So the first screen is just a search along with a query

large

and then the second screen after you hit search is going to take you to another screen which we're going to be using React router to get to.

large

And in here the idea is if you hover on this it's going to show a set of links

large

and clicking on these links redirects you to a useful article of some sort.

large

So specifically the API that this uses is one that Jordan Hudgens has built. And if I go to the Trello board here and I go down to back end API there's this link to dailysmarty.docs.apiary.io

large

and basically if you go to that it's an API for the dailysmarty app.

large

So let's see if you go to dailysmarty.com this is the app it's for.

large

So basically it's kind of like a forum of some sort, except a little bit different. But there are useful links and stuff that have been posted that allow you to learn quite a bit so dailysmarty is the idea.

What we'll be doing is we'll be fetching some of these articles and then displaying them in our app that we're going to build. So we'll be doing this using this API obviously and there's some really good documentation here.

large

And it just shows you how to do this this is using a little bit more well completely vanilla javascript right here using xml http request but we're just going to be doing it with promises or whatever we do. Basically it returns data and then we're going to render it on the screen in the application.

So I've built it out here. It's right here and there's just a few minor differences. We're going to be using font awesome for the icons, so in order to use font awesome you need to use a bolder font face, that's why it's bolder. But basically it fetches three recent posts and then when you click on that it will take you to whatever that post brings you to on a dailysmarty.

And then there's a set of topics that are there as well that you can just kind of look at and if you go in here and search something like rails it will generate all of these options here.

large

And when you click on the link instead of bringing us somewhere it actually opens up a list of links and that can be useful there.

large

I'm trying to think of an example that will have more than one link it's kind of just something you've got to search randomly, so there's four links on this one.

large

So we might be putting in different titles instead of useful link because that's not very useful. According to our design there's no images that we're going to be putting in to here. So when we get to that we might do a little improvising and put something in there because the response that we get back doesn't actually include an image but we'll see. So this is the response,

large

but basically back to the app I built. Basically what you'll be learning is how to fetch data like we've done in the last app and again we'll be doing some routing. Whenever I hit return it takes us to the results route and then we'll really be going down on components.

A lot of components in this we're going to really try and separate everything into their own components and reuse them such as the logo when you click this it brings you to the home. This is the same exact component but just called in different files different components. And you'll also be learning redux some more you'll be learning how to use redux better and how to use redux middleware such as redux promise or redux thunk in this case. So let's go ahead and create a git repo and the next guide and then we'll get started. So I'll see you then.