Add your face to the board. Tell the world your story
Team 4: We Code Hackathon, sponsored by Nike/Puppet Labs
Storyscope was created to inspire people to embrace diversity. We are NOT all the same ...and that's a good thing. This app is a dynamic, ever-growing photo gallery of people and the stories they choose to share. Explore the diverse world in which we live. Add yourself to the mix.
Users are encouraged to:
upload a photo or avatar
say something you want the world to know about you
If you don't already have these tools, download and install them before you start working with the Apparel Store app.
- Modern web browser (may we suggest Chrome?)
- Command Line Interface (CLI)
- Mac OSX: Terminal is already installed, or try iTerm
- Windows: Command Prompt (DOS)
- A text editor or coding tool of your choice. Sublime Text 2 is available for free for Mac and Windows, but will occassionally ask you to purchase a license when you save your files.
Once you have all prerequisites installed, open your CLI and navigate to the project folder.
New to command line? Navigate to the project folder using
cd (which stands for change directory). If you know the full path of the directory you can type it in, or you can click and drag the folder over to your CLI window and it will automatically fill in the path to that folder.
Press return, and you'll be taken to that folder.
To install the app, type
npm install and press return. You should see several packages and dependencies being installed.
npm WARN package.json email@example.com No repository field. npm WARN package.json firstname.lastname@example.org No license field. email@example.com node_modules/express ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com (firstname.lastname@example.org) ├── email@example.com (firstname.lastname@example.org) ├── email@example.com (firstname.lastname@example.org) ├── email@example.com (firstname.lastname@example.org, email@example.com) ├── firstname.lastname@example.org (email@example.com, firstname.lastname@example.org, email@example.com) ├── firstname.lastname@example.org (email@example.com) └── firstname.lastname@example.org (email@example.com, firstname.lastname@example.org) email@example.com node_modules/body-parser ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org (email@example.com) ├── firstname.lastname@example.org (email@example.com) ├── firstname.lastname@example.org (email@example.com) ├── firstname.lastname@example.org (email@example.com, firstname.lastname@example.org) ├── email@example.com └── firstname.lastname@example.org (email@example.com, firstname.lastname@example.org)
To start the app, type
node app.js in the command line. After a few seconds, you should see a success message. Keep your command line tool open, and open a new tab in your web browser. In the URL bar, type
When the page loads, there should be a sample item already in your store. To see the app in action, resize your browser window to take up one half of the screen, and the command line to take up the other half. Watch what happens in the command line when you click the "Delete" button on the existing listing.
Success reading file: data.txt
In the browser, create a new listing by entering an Author, Description, and Price in the form and clicking Add Listing. You should get the same success message. The app is changing entries in the data.txt file as you interact with the browser.
To stop serving the page to your browser, press Control+C in the CLI.
What happens if you open data.txt and edit the file?
What file(s) would you change to add a field to the form?
How is the date being filled in? How would you change the timezone to Chicago (CST)?