Code Monkey home page Code Monkey logo

sagas-portfolio-master's Introduction

React Redux with Sagas

For this weekend challenge, you'll be building a portfolio site to showcase your work.

Setup

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.

  1. Create a database named portfolio
  2. 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');
  1. npm install
  2. npm run server
  3. npm run client

Notes

Tags

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.

Screenshots

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.

Feature List

NOTE: Start by taking inventory of the existing code. Part of the work for setting up sagas has been done for you.

Project Page

  • 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

Admin Page

  • 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

General Tasks

  • 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.

Wireframes

NOTE: Feel free to modify the styling and layout of content on the page.

Project Page

Admin Page

Stretch Goals

  • 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

sagas-portfolio-master's People

Contributors

rachelpeddie avatar

Watchers

 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.