Skip to content

rakifsul/rf_react_advanced_todo

Repository files navigation

English

rf_react_advanced_todo - Todo App Written In Node JS and React

What is This Software?

rf_react_advanced_todo is a todo app built with Node.js, React, Redux, Redux Toolkit, Context, Bootstrap, and Axios.

The client uses Redux, Redux Toolkit, and Context, each separately.

The server uses Mongoose and Knex.

How It Works

This application functions like a typical CRUD.

The difference is, it is a Single Page App (SPA) that also uses React.

So there are no page refreshes.

The application is divided into a client and a server.

The client uses React.

The server uses Node.js.

How to Try the Server Code

How to Try server-mongoose Code

To try the server-mongoose code, navigate to the server-mongoose folder via the command line.

Next, create a .env file inside the folder...

Then, configure the database settings and other configurations in the .env file based on .env-example.

The server-mongoose code requires MongoDB, so make sure you have installed it and created the database as per the previous configuration.

Make sure port 3001 is not in use.

To run it:

npm install
npm start

Or:

npm install
npm run dev

How to Try server-knex Code

To try the server-knex code, create a .env file inside the folder.

Then, fill in the .env file based on .env-example. Here you can change the port, environment, and database details.

The server-knex code requires MySQL, so make sure you have installed it and created the database according to the configuration.

Now, make sure you are inside the server-knex folder.

Next, run:

npm install

Then, run:

npm run db:refresh

Then, run:

npm run dev

Or:

npm start

How to Try the Client Code

Make sure port 3000 is not in use.

Enter one of the client-* folders.

To run it:

npm install
npm start

Freelance Worker Link

Bahasa Indonesia

rf_react_advanced_todo - Aplikasi Todo Advanced dengan Node JS and React

Software Apakah Ini?

rf_react_advanced_todo adalah todo app yang dibuat dengan Node.js, React, Redux, Redux Toolkit, Context, Bootstrap, dan Axios.

Client menggunakan Redux, Redux Toolkit, dan Context, masing-masing terpisah.

Server menggunakan Mongoose dan Knex.

Cara Kerja

Aplikasi ini bekerja seperti CRUD pada umumnya.

Bedanya, ini adalah Single Page App (SPA) yang menggunakan React juga.

Jadi tidak ada page refresh.

Aplikasi ini dibagi menjadi client dan server.

Client menggunakan React.

Server menggunakan Node.js.

Cara Mencoba Kode Server

Cara Mencoba Kode server-mongoose

Untuk mencoba kode server-mongoose, masuk ke dalam folder server-mongoose via command line.

Selanjutnya, buat file .env di dalam foldernya...

Selanjutnya, konfigurasi database setting dan lainnya di file .env sesuai dengan .env-example.

Kode server-mongoose membutuhkan MongoDB, jadi pastikan Anda telah menginstallnya dan membuat databasenya sesuai konfigurasi tadi.

Pastikan port 3001 tidak digunakan.

Untuk menjalankannya:

npm install
npm start

Atau:

npm install
npm run dev

Cara Mencoba Kode server-knex

Untuk mencoba kode server-knex, buat file .env di dalam foldernya.

Selanjutnya, isi .env sesuai .env-example. Di sini Anda bisa mengubah port, environment, dan detail database.

Kode server-knex membutuhkan MySQL, jadi pastikan Anda telah menginstallnya dan membuat databasenya sesuai konfigurasi tadi.

Sekarang, pastikan Anda berada dalam folder server-knex.

Selanjutnya, jalankan:

npm install

Selanjutnya, jalankan:

npm run db:refresh

Selanjutnya, jalankan:

npm run dev

Atau:

npm start

Cara Mencoba Kode Client

Pastikan port 3000 tidak digunakan.

Masuklah ke salah satu folder client-*.

Untuk menjalankannya:

npm install
npm start

Freelance Worker Link