This is a test project for implementing some CRUD operations with both Server side and Client side.

Here you are able to do some operations like:

• Create a new user
• Fetch all the existing users
• Fetch only one user
• Edit the info of a user
• Remove a user

This project has been implemented as a full-stack project.

The client-side is a Single Web Application that has been implemented with ReactJS and communicates with the server through some Restful APIs.

The Server side is also a Node.js web service that uses Express.js framework to serve the Restful APIs.

Also, the project doesn't use any database and just uses a JSON file to store/fetch the data to make the project to be deployed and run much simpler.

After cloning the whole repository, for running the project in the development mode, you can run each side (Server and Client) separately.

In order to run the Server, first, you need to go to the ./api directory from the root of the repository.

cd ./api

Here there exists a file named .env.example which contains some environment variable that is used inside the project.

You should rename it to .env and fill the variables.

mv .env.example .env

The file only containes one variable which is the defined PORT for the server to listen to it.

You can put your desire port number here or just copy the line below in the file:

PORT = 9000

Now you need to install the Server dependencies by running the following code:

npm install

or

yarn install

After installing the dependencies, the Server is ready to be run.

For running the Server there are some scripts in the package.json file that you can take advantage of them.

Run the project in development mode:

npm run start:dev

Or use yarn if it works better for you

And also there are some integration tests in the ./tests directory that you can execute them by running this command:

npm test

At this point the server is ready to work, but there is any pre-defined data to be fetched.

By running the command below you can create some dummy user data:

npm run seed 100  # Put the number of records you want to be generated (default is 10)

In order to run the Client, first, you need to go to the ./client directory from the root of the repository.

cd ./client

Here there exists a file named .env.example which contains some environment variable that is used inside the project.

You should rename it to .env and fill the variable.

mv .env.example .env

The only variable here is the URL of the server.

You can fill the variable based on your Server config, or just use the sample value below if you have the same config as the sample values here for your Server:

REACT_APP_SERVER_URL = http://localhost:9000

Now you need to install the Client dependencies by running the following code:

npm install

or

yarn install

After installing the dependencies, the Client is ready to be run.

If you are familiar with the create-react-app tool, you probably know about the useful script inside the package.json file that you can take advantage of them.

Run the project in development mode:

npm start

Or use yarn if it works better for you

Now the Client is ready, and you can play with that.

|   app.js                    # Express app
|   seed.js                   # Generate dummy data
+---bin                       # Server entry point
+---controllers               # The controller layer
+---data                      # The data that is store on the disk (as a DB)
+---docs                      # Swagger Restful APIs documentation
+---middlewares
|   +---express-error-handler # Hanlde the errors and structure error responses
|   \---validation            # Validate the request body data by using Ajv pkg
+---routes                    # Define routes and call the controllers
+---services                  # Business logic (Service layer)
+---tests                     # Includes some integeration tests
\---utils                     # some useful generic utilities and are used in any project

+---public
\---src
    |   App.js                # App components which handle the routing
    |   index.js              # Client entry point and also contains the provider components
    +---assets                # Static files that are imported in the Components
    |   \---images
    +---components            # All the Components of the project
    |   +---AddButton         # The button for redirecting to Create user page
    |   +---ConfirmDialog     # The confirmation dialog box that is shown to delete user
    |   +---ErrorDialog       # The dialog box for showing errors
    |   +---Form              # The form that is used for both creating and editing a user
    |   |   +---ButtonInput
    |   |   \---TextInput
    |   +---Header            # Header of the site that is shown the project name
    |   +---List              # The list of users in the Home page
    |   |   +---DeleteButton  # The button for delete a user
    |   |   \---EditButton    # The button to redirect to Edit user page
    |   +---Pagination        # The pagination arrows that is shown in the Home page for loading another chunk of data
    |   +---Spinning          # Uses to show a spining animation to represent the loading process
    |   \---SpinningDialog    # The dialog box to show the spinning animation
    +---pages
    |   +---CreateUser        # The layout to represent the form for creating a new user and handle related states
    |   +---EditUser          # The layout to represent the form for editing a user and handle related states
    |   \---Home              # The layout to represent the required components on the Home page and track some necessary states
    \---utils

The API documentation is generated by using Swagger, and it is accessible via the /docs endpoint.