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).