Giter Club home page Giter Club logo

lettus-v.1's Introduction

Prime Project

This version uses React, Redux, Express, Passport, and PostgreSQL (a full list of dependencies can be found in package.json).

Download (Don't Clone) This Repository

  • Don't Fork or Clone. Instead, click the Clone or Download button and select Download Zip.
  • Unzip the project and start with the code in that folder.
  • Create a new GitHub project and push this code to the new repository.

Prerequisites

Before you get started, make sure you have the following software installed on your computer:

Create database and table

Create a new database called prime_app and create a user table:

CREATE TABLE "user" (
    "id" SERIAL PRIMARY KEY,
    "username" VARCHAR (80) UNIQUE NOT NULL,
    "password" VARCHAR (1000) NOT NULL
);

If you would like to name your database something else, you will need to change prime_app to the name of your new database name in server/modules/pool.js

Development Setup Instructions

  • Run npm install
  • Create a .env file at the root of the project and paste this line into the file:
    SERVER_SESSION_SECRET=superDuperSecret
    
    While you're in your new .env file, take the time to replace superDuperSecret with some long random string like 25POUbVtx6RKVNWszd9ERB9Bb6 to keep your application secure. Here's a site that can help you: https://passwordsgenerator.net/. If you don't do this step, create a secret with less than eight characters, or leave it as superDuperSecret, you will get a warning.
  • Start postgres if not running already by using brew services start postgresql
  • Run npm run server
  • Run npm run client
  • Navigate to localhost:3000

Debugging

To debug, you will need to run the client-side separately from the server. Start the client by running the command npm run client. Start the debugging server by selecting the Debug button.

VSCode Toolbar

Then make sure Launch Program is selected from the dropdown, then click the green play arrow.

VSCode Debug Bar

Testing Routes with Postman

To use Postman with this repo, you will need to set up requests in Postman to register a user and login a user at a minimum.

Keep in mind that once you're using the login route, Postman will manage your session cookie for you just like a browser, ensuring it is sent with each subsequent request. If you delete the localhost cookie in Postman, it will effectively log you out.

  1. Start the server - npm run server
  2. Import the sample routes JSON file by clicking Import in Postman. Select the file.
  3. Click Collections and Send the following three calls in order:
    1. POST /api/user/register registers a new user, see body to change username/password
    2. POST /api/user/login will login a user, see body to change username/password
    3. GET /api/user will get user information, by default it's not very much

After running the login route above, you can try any other route you've created that requires a logged in user!

Production Build

Before pushing to Heroku, run npm run build in terminal. This will create a build folder that contains the code Heroku will be pointed at. You can test this build by typing npm start. Keep in mind that npm start will let you preview the production build but will not auto update.

  • Start postgres if not running already by using brew services start postgresql
  • Run npm start
  • Navigate to localhost:5000

Lay of the Land

  • src/ contains the React application

  • public/ contains static assets for the client-side

  • build/ after you build the project, contains the transpiled code from src/ and public/ that will be viewed on the production site

  • server/ contains the Express App

  • src/components

    • App/App
    • Footer/Footer
    • Nav/Nav
    • AboutPage/AboutPage
    • InfoPage/InfoPage
    • UserPage/UserPage
    • LoginPage/LoginPage
    • RegisterPage/RegisterPage
    • LogOutButton/LogOutButton
    • ProtectedRoute/ProtectedRoute

Deployment

  1. Create a new Heroku project
  2. Link the Heroku project to the project GitHub Repo
  3. Create an Heroku Postgres database
  4. Connect to the Heroku Postgres database from Postico
  5. Create the necessary tables
  6. Add an environment variable for SERVER_SESSION_SECRET with a nice random string for security
  7. In the deploy section, select manual deploy

Update Documentation

Customize this ReadMe and the code comments in this project to read less like a starter repo and more like a project. Here is an example: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2

lettUs

LettUs

This application is a Community Supported Agriculture information page which allows farmers to display information about their farm and the CSA shares that they offer.

Getting Started

Download and unzip this repo to get started, this application was written using the VSCode IDE.

Prerequisites

What things you need to install the software and how to install them

Give examples

Installing

  • Run npm install
  • Start postgres if not running already by using brew services start postgresql
  • Run npm run server
  • Run npm run client
  • Navigate to localhost:3000

You will then be able to create and add information to your profile, as well as see those changes reflected on the DOM

Running the tests

Explain how to run the automated tests for this system

Authors

  • Max Faust

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

lettus-v.1's People

Contributors

maxfaust avatar

Stargazers

Tyler Longren avatar  avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.