andrei6700 / online-shop Goto Github PK

HTML 0.77% CSS 21.36% JavaScript 77.87%

express javascript nodejs react reactjs

online-shop's Introduction

Military Tank Shop

This project represents a store of military tanks from several countries, such as the USA and Germany.

I chose to make it about tanks because I have always been passionate about everything military vehicles from planes to submarines, tanks, etc and plus I am a big fan of WarThunder

I made this site to be able to present it to my college class "Database Management Systems" where I chose to make it using React and JavaScript.

Demo

In this link : https://military-tank-shop-oxg6qq21u-andrei6700.vercel.app/ , we have offered the possibility to try this tank shop, with small limitations too:

data added by the user will not be added to the database;
data will not be sent by mail;

Whereby a small error will appear after you have clicked on the Sent but.ton

Install

Clone the project, enter the project's folder, do: npm install then npm start and it's up.

Startup

Before to start this repo, you need to change the config.js from server folder.:

module.exports = {
    USER: 'user',
    PASS: 'password'
}

After modifying config.js, you need to open 2 terminals: To start the front-end, in the first terminal enter command: npm start. After adding the above command, you need to go to the server folder and enter npm run server.

Built With

React - The web framework used.
NodeJS - JavaScript runtime built on Chrome's V8 engine.
JavaScript - The programming language used for the application logic.
CSS - The styling language used for the layout of the application.
Cors - Middleware for managing same-origin policy in Express.
MySQL - elational database management system used for storing data.
Express - Node JS Framework for building RESTful APIs.
Nodemailer - Node.js library for sending emails.
Body-parser - Middleware for parsing data from HTTP requests in Express.
Yup - Form validation.
Axios - Back-end framework

Features

Usage of React Hooks
Form Validation using YUP
send a message with the entered data
send the data entered in the database

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

online-shop's People

Contributors

Watchers

Forkers

alexandrubeu

online-shop's Issues

[CI] Deploy to Vercel.

A live demo would be great to see.
Vercel offers a free tier to host sites such as this one.
The setup is very easy, you could probably deploy it without taking a look at tutorials.
What do you think? If you do want to deploy it and you encounter issues, I could help happily.

Recursion/callback hell, could be solved maybe?

Seeing this:

 connection.beginTransaction((err) => {
      if (err) {
        console.log(err);
        res.sendStatus(500);
        return;
      }

      connection.query(sqlInsertUsers, [name, email, tara, adresa, telefon, bmilitara, cantitate], (error, result) => {
        if (error) {
          console.log(error);
          connection.rollback(() => {
            res.sendStatus(500);
          });
          return;
        }

        const userID = result.insertId;

        connection.query(sqlInsertTanks, [tankName, tankDescription, tankPrice], (error, result) => {
          if (error) {
            console.log(error);
            connection.rollback(() => {
              res.sendStatus(500);
            });
            return;
          }

          connection.query(sqlInsertCountry, [tara, adresa], (error, result) => {
            if (error) {
              console.log(error);
              connection.rollback(() => {
                res.sendStatus(500);
              });
              return;
            }
            //....

is really an eye-sore, can something be done about this?
I honestly dont know the library that you are using but I am sure that there is a better way to handle multiple queries in a chain.

What, Why and How come the projects idea came to be or whats its purpose.
Technical details (what technologies does this use?).
Project setup (I want to run this project on my machine, what do I need and what are the steps?)

Use `children` prop in content

src/UI/page-layout/content.js
has:

import React from "react"
import {ContentChildrens} from "../page-setup/ContentChildrens"

export const Content=()=>{
    return (
        <div class="content">
            <div className="title">Magazin Online de Tancuri
            <hr className="hr-title"/>
            </div>
            <ContentChildrens/>
        </div>
    )
}

Using the children react prop would be much better and would yield nicer code readability, some docs about it here: Legacy React Docs.