Cancelled Toronto is an informative website about the cancelled transit plans of Toronto researched for and written by Danny Xue and built by Farhan Mohammed
This website is built using the Next.js framework, hosted on Ziet Now. I found Next.js to be the perfect library for this type application as I needed a static website that has multiple static routes.
This was my first time using the React framework outside of create-react-app. Since that framework was built for dynamic routing, implementing static routing required a lot of work arounds, and even after that it required me to import each page into App.js and specify a route for it. Next.js made it much easier, as any directories inside the pages folder automatically specify themselves as routes.
- Created a reuseable modular component for the layout of the website content. Each WebColumn component can be configured to be one or two columns, and each column can have different types of items on it such as images, quotes, text, special designs, etc. All you do is pass an array with the information and it renders it for you! More documentation available at
components/templates/WebColumn.js - Created a wrapper component where the contents of the website are wrapped around with the header, sidebar, and the footer. This made it easier to create the shape of the website as an edit on this compoenent will create a change on any and every route. More documentation available at
components/WebsiteWrapper.js
How to run the application on your own computer
$ npm i
$ npm run dev
Please note that most if not all images in this reposistory are licensed, and you are not allowed use them without permission from the original owner of the image. The underlying source code used to format and display that content is licensed under the MIT license.