Skip to content

bermarte/diy-wiki

Repository files navigation

Do-It-Yourself Wiki

screenshot

wireframe

tutorial

demo


A nifty little site that allows you to create, read, and update pages in a markdown wiki. We've provided most of the code for you. All you need to do is write the code that sits between the server and your file system, reading, writing and updating files saved on your computer.

You coaches will share a link to a live, working version of this wiki so you can know how yours should work when it's finished.

Index


Learning Objectives

Programming Skills

  • Debugging Node apps in VSC
  • Using npm: installing dependencies, running scripts
  • Understanding what "fullstack" means
  • Using branches
  • Running the Frontend & Backend separately

Node.js & Express Skills

  • Reading and writing from the File System
  • Correctly using Sync & Async file system manipulations
  • Writing Express routes with different verbs and URL parameters
  • Using Async/Await to write more readable code

Other People's Code

  • Navigating larger directory structures
  • Understanding code you didn't write
  • Setting up and running other people's projects
  • Contributing to existing code bases

API's

  • Explaining why you can't run an API with the browser
  • Running API's with Node.js & VSC
  • Testing API's with Postman
  • Understanding the need for CORS
  • URL Request Parameters
  • Sending values in the Request Body

Create-React-App

  • Know that it exists
  • Be able to install dependencies
  • Be able to run the frontend with npm run start

TOP


Getting Started

Before you can get started writing your routes you'll want to make sure all dependencies are installed, and to make sure the frontend and backends are operational.

Step 0 is to fork and clone this repo, this repo is the starter code. Then you can move on to ...

Running the API

Installing Dependencies

  1. npm run start(starts a server on port 4600)
  2. npm run demo (starts a demo on port 5000)

Running the API

  1. npm run dev
  2. Open Postman
  3. Explore localhost:xxxx!

Closing the Server

When you’re done developing or studying you will want to close the server. If you don’t close the server will get an error the next time you try to start it, the drive will still be in use.

  1. go to the terminal window where you are running the server
  2. type ctr-c

Running the Frontend

The frontend works, you don't need to change any code there. All you need to do is run it! (and study the code a bit if you're feeling ambitious :)

Installing Dependencies

  1. npm install or yarn install

Building the Frontend

  1. cd client
  2. npm run build or yarn build

TOP

Deployment on Heroku

  • To use npm to install your application's dependencies please delete
    the yarn.lock file.
    git rm yarn.lock

  • To use yarn to install your application's dependences please delete
    the package-lock.json file.
    git rm package-lock.json


Your Task

What you need to do to complete this assignment is write the 5 routes described in the `./wiki-server/server.js' file. You'll know your work is finished when you can use every button, link, and page in your frontend!

We recommend always keeping the live demo running in a separate tab as you develop to be sure you keep the final product in mind. You can find the link in a pinned message on your class' Slack channel.

Get an Existing Page

Calling this route should return a response with a property called body containing the text stored inside the file with the name :slug

  • method: GET
  • path: "/api/page/:slug"
  • success response: {status: 'ok', body: '<file contents>'}
  • failure response: {status: 'error', message: 'Page does not exist.'}

Post a New Page

Calling this route with a body property in the body of your HTTP Request, and a file name in the :slug URL parameter will add a new markdown file to the ./wiki-server/data directory

  • method: POST
  • path: "/api/page/:slug"
  • body: {body: '<file content>'}
  • success response: {status: 'ok'}
  • failure response: {status: 'error', message: 'Could not write page.'}

Get All Page Names

Calling this route will return a response with a property called pages which is an array containing all of the file names in ./wiki-server/data.

  • method: GET
  • path: "/api/page/all"
  • success response: {status:'ok', pages: ['fileName', 'otherFileName']}
  • failure response: (none)

Get All tags

Calling this route will return a response with a property called tags which is an array containing all of the tagged words in all of the files of ./wiki-server/data. Tagged words are any word in a file with a # in front of it, like so #tree. Or #table,

  • method: GET
  • path: "/api/tags/all"
  • success response: {status:'ok', tags: ['tagName', 'otherTagName']}
  • failure response: (none)

Get Page Names by Tag

Calling this route will return a response with a property called tag which indicates which tag was used to search, and a property called pages which is an array of all the file names containing that tag

  • method: GET
  • path: "/api/tags/:tag"
  • success response: {status:'ok', tag: 'tagName', pages: ['tagName', 'otherTagName']}
  • failure response: (none)

TOP


Helpful Links

Debugging JS Servers In VSC

Node.js Tutorials

These tutorials will introduce you to a bunch of new features in Node that you haven't seen in the Browser. While you're following these tutorials, it's important to remember that at it's core Node.js is still JavaScript. Everything you've learned so far (except for the DOM & fetch :) is still true! The Event Loop, Classes, Closure, Arrays, Objects, Variables, this., it's all still the same.

The tutorials below will introduce to what's new and what's special about Node. But don't forget to take some time and solve a few of the JavaScript Exercises above to get used to working with plain, vanilla JS in the terminal.

fs: Synchronous & Async

API's and Express

Node.js is a JavaScript runtime environment capable of writing Web Servers and API's all by itself. But it's a bit annoying. Express is a great and easy to use framework to help you write API's and Web Servers by handling all of the boring stuff for you so you can focus on what your app does.

Postman - an app for testing your API's without using a browser.

JSON Server - An NPM module that starts a RESTful API without you having to write a single line of code. This can be helpful practice for getting the hang of API's and Postman without getting tripped up by bugs and errors in code you write.

TOP


Contributors

TOP