├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── pages
    ├── add.js
    └── index.js
└── server.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hackpack-web-next
 2 | 
 3 | Write a website using React and Express using [Next](https://nextjs.org) that creates a Pokedex.
 4 | 
 5 | ## Getting started
 6 | This hackpack is designed to get you up and running with making a website using React and Express. You will make a site that grabs data from the [PokéApi](https://pokeapi.co/) and allows users to create their own Pokédex!
 7 | 
 8 | ### What is Next JS?
 9 | Next JS is a framework that allows you get started with React and server-side code quickly. It comes with built-in features like routing, hot module replacement, server-side rendering, and code splitting which improve performance and might otherwise be a **huge** pain to implement yourself.
10 | 
11 | ### Get started
12 | Clone this repository locally and install dependencies:
13 | ```
14 | git clone https://github.com/TreeHacks/hackpack-web-next.git
15 | npm install
16 | ```
17 | To start, run the following:
18 | ```
19 | npm start
20 | ```
21 | 
22 | You can open the website if you go to http://localhost:3000. Note that now, the terminal will watch for changes in your code and automatically recompile your code and also . Try changing some text in `pages/index.js` and the site should immediately change. This is called [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)!
23 | 
24 | ![image](https://user-images.githubusercontent.com/1689183/52835583-e0bc1f00-309b-11e9-8c2e-e067bd5290d4.png)
25 | 
26 | 
27 | ### Ideas for improvements
28 | - We are just storing the data temporarily, so when the user refreshes the page their Pokémon are gone! Can you use a database such as MongoDB instead
29 | - Can you add an accounts system with authentication? Maybe even a "sign in with Google" or a "sign in with Facebook" feature?
30 | - [Deploy this app](https://github.com/zeit/next.js/wiki/Deploying-a-Next.js-app-into-GitHub-Pages) to Github pages!
31 | - Feel free to make a PR with any additional improvements!
32 | 
33 | ### License
34 | MIT
35 | 
36 | # About HackPacks 🌲
37 | 
38 | HackPacks are built by the [TreeHacks](https://www.treehacks.com/) team to help hackers build great projects at our hackathon that happens every February at Stanford. We believe that everyone of every skill level can learn to make awesome things, and this is one way we help facilitate hacker culture. We open source our hackpacks (along with our internal tech) so everyone can learn from and use them! Feel free to use these at your own hackathons, workshops, and anything else that promotes building :) 
39 | 
40 | If you're interested in attending TreeHacks, you can apply on our [website](https://www.treehacks.com/) during the application period.
41 | 
42 | You can follow us here on [GitHub](https://github.com/treehacks) to see all the open source work we do (we love issues, contributions, and feedback of any kind!), and on [Facebook](https://facebook.com/treehacks), [Twitter](https://twitter.com/hackwithtrees), and [Instagram](https://instagram.com/hackwithtrees) to see general updates from TreeHacks. 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hackpack-web-next",
 3 |   "version": "1.0.0",
 4 |   "description": "https://pokeapi.co/",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node server.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/TreeHacks/hackpack-web-next.git"
12 |   },
13 |   "keywords": [],
14 |   "author": "",
15 |   "license": "ISC",
16 |   "bugs": {
17 |     "url": "https://github.com/TreeHacks/hackpack-web-next/issues"
18 |   },
19 |   "homepage": "https://github.com/TreeHacks/hackpack-web-next#readme",
20 |   "dependencies": {
21 |     "express": "^4.16.4",
22 |     "isomorphic-unfetch": "^3.0.0",
23 |     "next": "^7.0.2",
24 |     "react": "^16.7.0",
25 |     "react-dom": "^16.7.0",
26 |     "react-select": "^2.3.0"
27 |   },
28 |   "devDependencies": {}
29 | }
30 | 


--------------------------------------------------------------------------------
/pages/add.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import fetch from 'isomorphic-unfetch'
 3 | import Select, { components } from 'react-select'
 4 | import { get } from 'http';
 5 | 
 6 | 
 7 | 
 8 | export default class extends React.Component {
 9 |     static async getInitialProps({ req }) {
10 |         let response = await fetch("https://pokeapi.co/api/v2/pokemon?limit=964");
11 |         response = await response.json();
12 |         let pokemonNames = response.results;
13 |         let pokemonList = pokemonNames.map(e => ({ label: e.name, value: e.url }));
14 |         return { pokemonList: pokemonList }
15 |     }
16 | 
17 |     constructor(props) {
18 |         super(props);
19 |         this.state = { data: {}, images: {}, value: [] };
20 |     }
21 |     onChange(value) {
22 |         this.setState({value: value});
23 |     }
24 | 
25 |     render() {
26 |         const MultiValueLabel = (props) => {
27 |             let url = props.data.value;
28 |             let imgUrl = this.state.images[url];
29 |             if (!imgUrl) {
30 |                 let get = async () => {
31 |                     let data = await fetch(url);
32 |                     data = await data.json();
33 |                     imgUrl = data.sprites.back_default;
34 |                     this.setState({
35 |                         images: {
36 |                             ...this.state.images,
37 |                             [url]: imgUrl
38 |                         }
39 |                     });
40 |                 }
41 |                 get();
42 |             }
43 |             return (
44 |                 <div>
45 |                     <components.MultiValueLabel {...props} />
46 |                     <img src={imgUrl} />
47 |                 </div>
48 |             );
49 |         };
50 |         return (
51 |             <div>
52 |                 <Select
53 |                     closeMenuOnSelect={false}
54 |                     defaultValue={[]}
55 |                     isMulti
56 |                     value={this.state.value}
57 |                     onChange={e => this.onChange(e)}
58 |                     components={{ MultiValueLabel }}
59 |                     //     styles={{ multiValueLabel: (base) => ({ ...base, backgroundColor: colourOptions[2].color, color: 'white' }) }}
60 |                     options={this.props.pokemonList}
61 |                 />
62 |                 Hello World
63 |         {/* <table>{this.props.pokemonList.map(pokemon =>
64 |                     <tr key={pokemon.name}>
65 |                         <td>{pokemon.name}</td>
66 |                         <td><img src={pokemon.sprites.front_default} /></td>
67 |                     </tr>)}
68 |                 </table> */}
69 |             </div>
70 |         )
71 |     }
72 | }


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | // import '../styles/main.scss'
 4 | 
 5 | export default () => (
 6 |     <div>
 7 |         <h1>Welcome to "Build my own Pokédex"</h1>
 8 |         <ul>
 9 |             <li><Link href='/add'><a>Add a Pokémon to my Pokédex</a></Link></li>
10 |             <li><Link href='/view'><a>b</a></Link></li>
11 |         </ul>
12 |     </div>
13 | )


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const express = require('express')
 3 | const next = require('next')
 4 | 
 5 | const port = parseInt(process.env.PORT, 10) || 3000
 6 | const dev = process.env.NODE_ENV !== 'production'
 7 | const app = next({ dev })
 8 | const handle = app.getRequestHandler()
 9 | 
10 | app.prepare()
11 |   .then(() => {
12 |     const server = express()
13 | 
14 |     server.get('*', (req, res) => {
15 |       return handle(req, res)
16 |     })
17 | 
18 |     server.listen(port, (err) => {
19 |       if (err) throw err
20 |       console.log(`> Ready on http://localhost:${port}`)
21 |     })
22 |   })


--------------------------------------------------------------------------------