Build a project, to learn together

You Can Do This!
1

Team project 1: Recipe project / build with react + firebase
Tech stack: Redux/firebase(firestore)/Oauth facebook
Features: Oauth/CRUD (comments + rate) via firestore
Recipes data via https://spoonacular.com/food-api

Participants
monroemann
bon8519
DevSlab
holhen
AllInorNot
JohnPA
KristianFriis
Bastienne

DAY 1:

  • Generate react app: npx create-react-app recipes
  • Add dependencies: go in repo in folder. Open terminal: yarn add axios react-loadable react-router-dom
  • Build your bundle: Yarn build (or npm run build)
  • Host your project with Firebase:
    Create firebase account
    Create a new project with name recipes
    Create DB:
    2
    21306×668 114 KB

    install CLI: npm install -g firebase-tools then in terminal of your project write:
    firebase login
    firebase init (to generate the firebase files in your react project) -> checkboxes these options
    1
    11970×494 48.2 KB

    then select recipes project and answer as follow: press: enter/enter/build/yes/
    3
    31156×1138 133 KB

    Deploy with command: firebase deploy
    4
    41258×794 144 KB

Notes:

  • axios is number1 http client to request server api end points.
  • react-loadable is an easy solution to split your code in different chunk. This way your website will be much faster by loading chunks by containers and not by loading everything on first loading.
  • react-router-dom is just to create routes

My explanations are very short, please tell by answering this post if you encounter some difficulties and I ll answer you in details by editing this post

3 Likes
2

This sounds like fun. I’d be interested. Let me know! Je croix que c’est une idée magnique!

1 Like
3

Sounds good! Let me know if you go through with this.

1 Like
4

cool :slight_smile:
Yeah, then let’s do it.
What kind of project you want to build?

5

In!
I have been thinking on similar lines. Its a great way to learn! I’d also have some ideas for what could be built, if you’re open to that.

1 Like
6

Cool sure, what are your ideas?

7

If I have a place, I would be interested. :slight_smile:

1 Like
8

Can I be a part of this project too.

2 Likes
9

That’s a good idea.

What about a recipe database where you can search for recipe with specific food like if you have only two carrot and a potato what could you do, or have a search for allergies and intolerances.
You could rate comment share etc…

2 Likes
10

It seems a good idea JohnPA.

11

I was thinking of building a tinder like UI, swipe to reject, for local restaurants. I was considering the Zomato API for this. This would be my go to project to learn react.

1 Like
12

Sounds cool and not too complex.
You have an API or Json DB with recipes?

13

It would be a react native app then?

14

I have updated list of participants with projects ideas, maybe we can allow everyone to join without max limit.
Then I could build a small website and add part of code everyday, everyone could comments and ask questions for each steps.
It would allow to understand all steps with all questions linked to and also see a classic developper journey (process of thinking, establishing architecture…). The goal is to create code patterns easy to understand.
What do you think?

If you have other app ideas or you wanna vote for some, please tell :slight_smile:

15

If there is still room for another participant the I would like to join :smiley:

16

Yeah, -------> added

1 Like
17

would love to join. but it’s it a bit too advanced?

1 Like
18

You need to now basic html/css (easy).
And also basic javascript (variables, arrow functions, arrays & objects). You don’t need to know js methods as you will learn it in this projects.
You want to try?

1 Like
19

Yes i think i would like to try…

1 Like
20

How soon can we start the project in React? I am very much excited to start.
@NielsDom

2 Likes