Skip to content

creativeyann17/creativeyann17.github.io

Repository files navigation

Introduction

Hello, this repository contains the source-code of my web-site creativeyann17.github.io. The purpose of this web-site is to showcase some of my acquired skills and knowledge in web and software development. The following readme gives some details about of the choices done to develop it.

Note: current github-page will redirect to AWS: https://perso.creativeyann17.com

Technologies

This project is built on the following stack:

Technology Type Reason of the choice
AWS Cloud Migration done in January 2023 of the previous API/GraphQl/Websocket/Analytics (see bellow) to AWS
GitHub Repository Most of my others projects are located here, it's free and provide a lot of features.
GitHub Pages Server At first I didn't know it was a thing! But the fact that it's well integrated, easy to use and free made me choose it instead of another provider.
GitHub Actions Continuous integration At first I was using a React third party library named gh-pages to build and deploy in local, it worked really well, until I was in need of a real CI to define env. variables and secrets.
React.js Library Since I learned it for my first employment after arriving at Montreal it's difficult to imagine working with another user interfaces builder. Some really well known libraries are used too: react-router, react-redux, react-saga, react-bootstrap, prop-types, lodash, typescript and more ...
Bootstrap Library (UI/UX) Developing is already time consuming so I was in need of a library with a lot of components responsive-ready and some CSS helpers. I chose bootstrap because I worked with before. The react library react-bootstrap.
Font Awesome Icons https://fontawesome.com/icons?d=gallery&p=2&q=html
Markdown Styling One of the web-site feature is to provide a list of articles the user can read, like tutorials ... In order to avoid writing everything inside the code itself the idea is to write independent markdown files that will be retrieved from the server. The react library used to read markdown react-markdown.
Google Analytics Analytics Always nice to have some information about the visitors like the devices they used, from which country, what pages they look the most ...
creativeyann17-github-api API A Micronaut API deployed on Heroku to expand the possibilities of the web-site. You can find the current source-code here.
Websocket API Feature Using creativeyann17-github-api the web-site will connect (and retry if necessary) to the API. Online users can be notified in realtime of changes using this feature.
Article count of views API Feature When reading an article the web-site will increase by one (if never read before) or get the count of views of the article. Every others viewers will be notified by websocket of the change in realtime. The web-site will remember in local if the article has been read before or not.
GraphQL Query Proof of concept of using GraphQL on both API + front-end. Currently implemented within redux/saga service because of difficulties to use @Apollo/Client hooks to make it work as expected. An environment variable is used to switch between REST/GraphQL
Article likes API Feature Users have now the ability to like an article. Same as count of views, this feature uses websocket to be notified if another user liked the article too. Users can't like the same article twice and this state is saved in local storage (nothing on the server side).