This project's main purpose, besides being a portfolio, was to try a full suite of tools with NextJS (a full-stack React framework) with TypeScript. The end-user will be able to navigate around the website to look at projects that the hobbyist created. Components include individual sections that make up the detailed project pages like showing a gallery of technology stacks (showing a logo and a link to the official page), and an image gallery showing the project in various screen sizes separated in a tab panel.

Instead of using a database, there is a folder of Markdown files that will make up the project listing. Using metadata, in the Markdown files with Gray Matter, this will show all the information of that project and be displayed onto the website. This is all being handled with using a library of functions to handle retrieving all posts or an individual post. This is to reduce costs for the project by setting up a database instance.

Testing was done with the various components using Jest for most of the unit testing including component testing with the React Testing Library. This is followed with Cypress to handle the integration testing. With some additional programming and fake data and posts; all the integration testing will not be fragile and not have to rely on actual data to make the proper testing. Before each Git branch merges from a pull request; GitHub Actions are set up to perform test checks to make sure that all are passing before it goes to the develop branch.

Utilizing GitHub issues and projects to keep track of tasks to be completed to make sure that nothing will be forgotten for later implementations.


React Markdown

This is my portfolio that show cases all of my projects from personal to professional (if allowed).

Hypertext Markup Language (HTML 5)

Cascading Style Sheets (CSS 3)

Logo of SASS or Syntactically Awesome Stylesheets

Syntactically Awesome Style Sheets (SASS)

ECMAScript (JavaScript)

TypeScript

React JS

Next JS

Logo of Contentful, the very headless CMS being used.

Contentful

Bulma

Font Awesome

Markdown

Jest

Testing Library

Cypress

Logo of GitHub Actions by GitHub and Microsoft

GitHub Actions

Portfolio

SHELF is an ebook library repository that displays all of my ebooks from a server with a friendly graphical user interface (GUI). 

This is my first attempt at the MERN stack: MongoDB, Express.js, ReactJS, and NodeJS. Basically, the front-end would be ReactJS while the backend composes of NodeJS using the Express.JS framework to make it a REST API application, and the main database is a NoSQL, Document-based MongoDB. With this project, for the front-end, I did not use any front-end library (see Bootstrap, Bulma, Chakra, etc...) and all of the components are all custom made. 

When someone navigates around the web application it is broken down into three sections: the breadcrumbs, the directories, and the books. Each section can be displayed in different formats by the choosing of the user: links (breadcrumb only), list view, and tiles. Tiles gives off the most graphical representations as it shows the book covers (right now for just PDF ebooks). List view does show some icons, but to give it the best look I would recommend tiles.

The back-end did bring in an opportunity to use a testing framework, so I decided to use Mocha with Chai. This allowed me to make sure the REST API will give the desired results when scanning through the filesystem, on the server, and to check if the books may already exist in the MongoDB database otherwise just ignore it.

I did had to use a PDF library, thanks to Mozilla, to retrieve the cover of the ebook (normally the first page). This one proved to be one of the most challenging aspects to the program. Sadly, I have not gone far into retrieving the cover image from epub files.

Canvas

CORS

.env

PDFJS by Mozilla

Chai As Promise

Chai HTTP

Chai String

MongoDB Memory Server

SHELF is an eBook library repository that displays all of my ebooks from a server with a friendly graphical user interface (GUI). 

Logo of NodeJS. Please refer to the guidelines when using this image.

https://nodejs.org/en/about/resources/

NodeJS

Express JS

Logo of MongoDB. Please refer to the guidelines when using this logo.

https://www.mongodb.com/brand-resources