javascriptreactjsfirebaseexpressweb-applications

What is the process of creating a web application with React and Express?


Background

I've been making a conlang (constructed language) for a while now. I've been managing it using a JSON file to store words and a Python file to retrieve it. Now, I want to expand it. Since the language is for me and my friends, I wanna make a web application that has a authentication system, and once you authenticate you can access words etc. Users are placed in two different categories: member (read), admin (write). In my initial plan, I planned to use Render to deploy the (initially planned) Python/PHP website that uses (initially) Amazon DynamoDB. Now, I've changed to JS and Firebase after AI recommended me.

Problem

I have no experience in dynamic websites (I've only made static ones before) and databases. AI is also giving me mixed answers and I do not know where to start. As the title says, I plan to use React for frontend and ExpressJS for backend. The problem is that I do not know how to start.

I have multiple questions, such as:

  1. Are React and Express projects separate?
  2. If so, am I supposed to use different repositories?
  3. AI asked me to initialize a React project (npx create-react-app) (which I have) and now when I ask about the backend, it asks me to create another project in Express. What am I supposed to do now?
  4. About this use case, do I even need a backend?
  5. Are there better platforms instead of Firebase and Render?

In short, I am a complete beginner at JS web-app development.

If there is any information that you need, feel free to ask.

Information

Code editor: VSCode

AI: Gemini (Google)

Current file directory:

node_modules/
... a lot of packages
public/
... stuff (probably not related)
src/
... App.css
... App.js
... App.test.js
... index.css
... index.js
... logo.svg
... reportWebVitals.js
... setupTests.js
.env
.gitignore
package-lock.json
package.json
README.md

index.js Code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: [a link but stackoverflow doesnt allow link shorterners]
reportWebVitals();

Thanks in advance,

Beedful


Solution

  • Let's see, first of all yes, React and express are differents, React is for your frontEnd side(the user interface), express for the other hand is a NodeJs framework to build a server(BackEnd) yo should first install NodeJs, this Will come with npm which is recomended for installing dependencies, now in order to deploy, You should have your FrontEnd and your BackEnd y separates Repositories, is recomended.

    After having NodeJs You can create your folder for BackEnd and Open a terminal, use the cd command to to go inside that folder(example if You Open terminal and You are in user You should cd Desktop or cd Documents and then cd BackEnd assuming the folder is called like that) and type npm init, this Will create a project with a package.json, Open the folder in visual studio code and Open a terminal inside, you can start installing dependencies, for example, npm express nodemon cors , between other dependencies that you need, then you can create a index.js file and start your server(check express documentation is easy) for the front is similar but easier just need to use the create React app command or use vite or any other webpack You like. After that You can start to code, You Will need yo learn React and how to use it.

    I could go more in depth but Will be hard for You to understand me, i just want to guide You with these steps to give You an idea on how to start, if You need any specific help let me know.