For this weekend challenge, you'll be building a portfolio site to showcase your work.
PLEASE COMMENT YOUR CODE. Do not clone this repository. Instead, download the zip, extract the contents,
git init
,git add .
,git commit -m "initial commit - base project"
and add your remote. Please do this before you leave for the day.
- Create a database named
portfolio
- Run the following SQL using the
portfolio
database:
CREATE TABLE "tags" (
"id" SERIAL PRIMARY KEY,
"name" varchar(255) NOT NULL
);
CREATE TABLE "projects" (
"id" SERIAL PRIMARY KEY,
"name" varchar(255) NOT NULL,
"description" varchar(2048),
"thumbnail" varchar(2048),
"website" varchar(2048),
"github" varchar(2048),
"date_completed" date,
"tag_id" INT REFERENCES "tags"
);
INSERT INTO "tags" ("name")
VALUES ('React'), ('jQuery'), ('Node'), ('SQL'), ('Redux'), ('HTML');
npm install
npm run server
npm run client
We've given you some starter tags. Feel free to change or add some.
For base mode, you should only include one tag per project. This gives you a one to many relationship. We'll cover many to many SQL queries next week.
To take a screenshot of your project, use Command-Shift-4
on your mac. It turns the cursor into a crosshair, which you can drag to select a portion of your screen to capture. The image will appear on your desktop.
Place thumbnail images in the public/images
folder.
Do not implement image upload for base mode.
NOTE: Start by taking inventory of the existing code. Part of the work for setting up sagas has been done for you.
- Client side route that displays projects that are stored in the database
- Each project should conditionally render a name, description, thumbnail, website, date complete and a tag. Many of the fields are optional, only show properties that aren't null.
- Include a link to GitHub that opens in a new window
- Add your name at the top of the page
- Use Sagas for API requests to your server
- Client side route that displays a form allowing you to add a new project to your portfolio
- Include a drop down menu with a list of tags
- Send data to the server and notify the user of success or failure
- List projects by name and allow the user to delete them
- Include a button that navigates to the project page
- Commit your code frequently! You should have at 15+ commits on a project of this size. Use branches to help break down your features.
- Comment your code.
- Update this README to include a description of the project in your own words.
NOTE: Feel free to modify the styling and layout of content on the page.
- Use the GitHub API to get user information to display at the top of the page
- Improve styling on the page using Material UI
- Include a form on the admin page for adding new tags
- Implement additional features of the GitHub API xs