Help: making a MERN project

JavaScript
#1

me and my group is going to make a mern project for event management
which has key features like

user registeration google auth
posting an event
event organizer can see number of ppl registered
registeration form for atendees

I’m not sure how I’ll go forward with this project cuz I’ve never usern react and node together
I dunno about some technologies so I dont know if that will be required or not
example
I dunno If I’ll need socket.io

how can I go forward with this project ? do frontend or backend first ?
or both together ?

can some share some resources and guide me how can I go forward with this project

#2

It’s unclear where you are in terms of education.

Are you comfortable with React?

You mention that you’ve never used “react and node together”. Do you mean using node for the back end? It doesn’t matter what language the back end it written in. The front end doesn’t know and doesn’t care.

Do you need sockets? That depends - do you want realtime information shared between the server and all the clients? Then you need sockets. If the clients will just fetch data when you need it, then you don’t need sockets.

FCC teaches the MERN stack. If you finished the first six certificates, you would have the answers to these questions.

#3

Hello there,

Glad to hear you are starting a project - they are excellent ways to learn.

The way I learnt how to build MERN applications is:

  • Learnt MongoDB, Express, React, and Node in the fCC curriculum
  • Watched some YouTube tutorials building fullstack applications
  • Started building both backend and frontend at the same time

The reason I do both at the same time is I usually do not start with the most well-defined user-stories. This leads to the structure of my apps constantly changing, and I usually only figure this out when something in the frontend does not work with something in the backend and vice-a-versa.

There is nothing wrong with this fact, because you are about to. Perhaps, if this project of yours is looking like a massive undertaking, then it would be beneficial to start with a smaller project first (TODO App is usually a decent example which can contain various levels of difficulty).

This would be problematic, in causing you to restructure your app too much, when you realise you need to include a technology way down the line. So, I would recommend you get an idea of this at conceptualisation, before starting to code.

It does not sound like your app needs Socketio, but your user-stories are a bit sparse to say.

Some resources:

  • If you have not already, the fCC curriculum will give you an idea of many common technologies used in a MERN app.
  • YouTube has too many tutorials on MERN apps, and it is useful to see how to start and use the boilerplates which exist.

If you are quite unsure, I would advise you to find something at least similar that is well documented, then copy the boilerplate off of that (e.g. find a tutorial which uses a CRA on the frontend - ridiculously easy to set up) . Otherwise, you will need to go down a whole other rabbit hole in learning technologies to get the app started (e.g. Babel, Webpack, Gatsby, etc.)

Hope this helps

#4

I’ve done fcc react projects and some node projects

#5

I followed a tutorial online they just used node to display data on react front end but I think my app will need much more than that

#6

I’ve done fcc react projects and some node projects

Then you have the pieces in place. Have you done any servers in node, like with express, maybe? Once you do that, you just make http calls against that server. That is true no matter if you are using React of not - React doesn’t change that at all.

1 Like
#7

But Sky gives some good advice - just follow that.

1 Like
#8

ooh I’ve done all node projects on FCC

#9

Then you know how to build a server. And presumably you know how to make http requests from your front end. Presumably you know how to host a server locally and hit it with your local front end in React. If not, I’m sure there are some good videos out there.

Whether or not you need sockets? Presumably you did sockets in the FCC coursework (it used to be in there, I’m assuming it still is).

If you have the basic level of knowledge that you seem to have, I would just dive in and start building. Do a little planning, but then start building. You’re going to make mistakes but you will learn from them. You will encounter questions, but you will not fully be able to articulate those until you encounter them in the wild. Just go for it.

2 Likes
#10

sure I should start and see where it goes on

#11

Sure, and you’re going to get frustrated and maybe once or twice have to start over again. But you will learn so much.

Just set small goals. Build a basic server that will return dummy events. Design your client that displays them. Create a form to make new events. Build an endpoint to accept them. Build out your DB to store them. Just keep working on it incrementally. The more you can break it into small pieces, the easier it will be. Figure out what the minimum viable product is and work towards that. You can make it fancy later, but what is the bare minimum that will allow this to do something useful - make that your goal and figure out what steps you need to get there.

#12

I was wondering can I convert a MERN app to react native ?

#13

“Convert” may be too strong of a word. Assuming things are put together reasonably, the MEN part should convert over pretty easily. But the R part will be the problem. You can’t just copy React code into a React Native project. Some code might be able to be reused, like your redux stuff or helper functions that don’t contain JSX, etc.

React and React Native are not the same thing, but if you know React, React Native is very easy to learn. The hardest part is setting up the environment. After that, the main difference is that you don’t have any of the HTML elements you knew but have React Native elements, some of your events are different, and you have CSS but it’s more of a subset and I like to think of it as CSS-ish. But still, once the environment is set up, if you know React, React Native will be fairly easy. But putting a React project on React Native is not trivial. At the very least you will have to rewrite all the JSX and much of the CSS. And also you may have to rethink the app - what flows well on a 24 inch screen with a big keyboard and mouse does not necessarily work on a tiny phone screen.

#14

ooh thxx , another question should I use redux for my project or I can do without it

#15

That depends on the size of the project and how much data has to be handled.

Redux is great at moving data around the app and with things like Saga or Thunk, it is good at managing your async actions and keeping that logic out of your components.

That being said, if you have a small app and/or don’t have a lot of data to pass around, you may not need it. It is also becoming increasingly common to use context instead of redux and to use things like hooks to handle some of that logic and async actions.

I still think redux is good to learn and will be around for a while, but you need to decide if it is needed for this project.

1 Like