Giter Club home page Giter Club logo

express-pokedex-deliverable's Introduction

Pokedex

Your mission is to be the very best, like no one ever was, at making a Pokémon manager (a Pokédex).

Learning Objectives

  • Full CRUD App

Prerequisites

  • JavaScript
  • Node / Express
  • HTML / CSS

Getting Started

All you are given is a pokemon.js file that has all the raw data for 151 Pokémon (it's over 50,000 lines of code). You can render this as JSON in your browser. If you decide to check it out in your text editor, don't click on or open this file unless you are prepared to wait a minute or so for it to load. It is a huge file.

It is up to you how you build your app, in what order you want to do things, what kind of design flow your app will have, where you put your delete button, etc, and what parts of the Pokémon data your pages will display.

There are a few requirements to keep in mind:

MVP (Minimum Viable Product)

Your app should:

- display a bunch of Pokémon images on the index
- have separate show pages for each Pokémon, accessible by clicking on a Pokémon's image on the index page
- have the ability to add a new Pokémon
- have the ability to edit existing Pokémon
- have the ability to delete Pokémon
- have some styling

Setting up

  1. Work inside the given pokedex folder

  2. Ideally, your app should follow the MVC format of models, views, and controllers (these are your routes for now).

  3. However, note you don't actually need a controllers folder for now since all your routes will be in your server.js file

Routes

Your app should use RESTful routes:

  • Index
    • GET /pokemon
  • Show
    • GET /pokemon/:id
  • New
    • GET /pokemon/new
  • Edit
    • GET /pokemon/:id/edit
  • Create
    • POST /pokemon
  • Update
    • PUT /pokemon/:id
  • Destroy
    • DELETE /pokemon/:id

Need a jumpstart?

Some server.js starter code to get you started
const express    = require('express');
const app        = express();

const Pokemon = require('../models/pokemon.js');

// INDEX app.get('/', (req, res) => { res.render('index.liquid', { data: Pokemon }); });

// SHOW app.get('/:id', (req, res) => { res.render('show.liquid', { data: Pokemon[req.params.id] }); });

Data

Notes on the Pokémon data and what to display

The pokemon.js file is massive and there is a ton of data to parse through. You need not display all of it on your pages. On your index page, you can just render the images.

Here are suggestions for what to display on your Pokémon's show page:

  • The pokemon's name
  • The image of the pokemon
  • An unordered list of the Pokemon's types (eg. water, poison, etc).
  • The pokemon's stats for HP, ATTACK, and DEFENSE.

Style Your App

Try and make your app look and act nicely with static assets (set up a public folder and add some css, js)-- consider using some jQuery!

Need some style inspiration?

These are screenshots from what other students have done to their Pokedex:

Example 1

Example 2

Example 3

Commits

The order of your commits this time does not matter, but refer back to the MVP to make sure that you're meeting all of the requirements. Make your commits as you complete the work, not all at once in the end! Some sample commits can be found below.

Sample commits:
** Commit your work.**
"Server is working and displays a plain index page"

** Commit your work.**
"Displays a bunch of Pokémon images on the index".

** Commit your work.**
"Has separate show pages for each Pokémon".

** Commit your work.**
"Has the ability to add a new Pokémon".

** Commit your work.**
"Has the ability to edit existing Pokémon".

** Commit your work.**
"Has the ability to delete Pokémon".

** Commit your work.**
"The app uses RESTful routing, all seven RESTful routes".

** Commit your work.**
"View templates are complete".

** Commit your work.**
"Static assets included (CSS) and styled app".

Deliverables

  • A Pokedex app that meets all the MVP requirements outlined at the beginning of this markdown.

Technical Requirements

  • Your app MUST run without syntax errors. If there are errors you can't solve, comment them out and leave a comment above explaining what is wrong

Submission Guidelines

  • Submit your homework via the homework submission form pinned to the classroom channel

express-pokedex-deliverable's People

Contributors

evelynyu007 avatar jurgenstevens 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.