Fullstack React and GraphQL training

Fullstack React and GraphQL training.

Requirements

• Nodejs
• Cloudinary account
• MongoDB(I recommend mongo atlas)
• Ethereal email
• Stripe account

Tools and modules on use in the application

• React on the client-side of the application
• Next.js on the client-side of the application
• Styled Components for the styles of the application
• Keystone.js as a CMS of the application
• Cloudinary to store the images of the application
• dotenv for the environment variables of the application
• GraphQL for the queries and mutations
• Apollo for handle the graphQL API and the cache of the queries
• Ethereal for an example email service
• nodemailer to define and send an email
• react-transition-group to animate the cart counter
• downshift to handle the search
• Stripe to handle the payments on the application

Pages

• Home
• Products
• Single Product
• Update Product
• Sell
• Orders
• Single Order
• Account
• Sign in page
• Reset page
• CMS home

Steps to run the frontend side of the application

• On your editor go to the frontend directory
• Create a file called env.local
• Add the following content to the env.local

  NEXT_PUBLIC_STRIPE_KEY="my_stripe_public_key"

• On your terminal go to the frontend directory
• Install all dependencies using: npm install
• Run your local server using: npm run dev
• On your browser; go to the homepage

Steps to run the backend side of the application

• On the root of the backend directory create a file called .env
• Add the following content to your newly created file

  CLOUDINARY_CLOUD_NAME=my_cloudenay_cloud_name
  CLOUDINARY_KEY=my_cloudenary_api_number
  CLOUDINARY_SECRET=my_cloudenary_secret
  COOKIE_SECRET="random_string"
  DATABASE_URL=my_mongoDB_connection_string
  FRONTEND_URL="http://localhost:7777"
  MAIL_HOST="smtp.ethereal.email"
  MAIL_PORT=587
  MAIL_USER="your_ethereal_username"
  MAIL_PASS="your_ethereal_password"
  STRIPE_SECRET="my_secret_stripe_key"

• On your terminal; go to the backend directory
• Install all dependencies using: npm install
• Run your local server using npm run dev
• On your browser; go to http://localhost:3000/

Inject testing data to the application

• On your terminal; go to the backend directory
• Install all dependencies using: npm install
• Run the following command npm run seed-data