Before you get started, make sure you have the following software installed on your computer:
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
);
CREATE TABLE "daily-calories" (
"id" SERIAL PRIMARY KEY,
"username-calories" INT REFERENCES "user"("id"),
"date-calories" DATE,
"total-calories" INTEGER,
"allotted-calories" INTEGER
);
If you would like to name your database something else, you will need to change calorie_tracker
to the name of your new database name in server/modules/pool.js
- Run
npm install
- Create a
.env
file at the root of the project and paste this line into the file:While you're in your newSERVER_SESSION_SECRET=superDuperSecret
.env
file, take the time to replacesuperDuperSecret
with some long random string like25POUbVtx6RKVNWszd9ERB9Bb6
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 assuperDuperSecret
, 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
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.
Then make sure Launch Program
is selected from the dropdown, then click the green play arrow.
src/
contains the React applicationpublic/
contains static assets for the client-sidebuild/
after you build the project, contains the transpiled code fromsrc/
andpublic/
that will be viewed on the production siteserver/
contains the Express App
This code is also heavily commented. We recommend reading through the comments, getting a lay of the land, and becoming comfortable with how the code works before you start making too many changes. If you're wondering where to start, consider reading through component file comments in the following order:
- src/components
- App/App
- Footer/Footer
- Nav/Nav
- AboutPage/AboutPage
- InfoPage/InfoPage
- UserPage/UserPage
- LoginPage/LoginPage
- RegisterPage/RegisterPage
- LogOutButton/LogOutButton
- ProtectedRoute/ProtectedRoute