Project 1: Language Learning platform
What I learned:
This project was created to bring students and language teachers together, on a learning platform that allows teachers to organize, create and distribute assignments and give students personal feedback/ update where they are in the course, their level of comprehension for each exercise/section and track progress. This project was the very first time I got to bring multiple technologies together to build a webapp that incorporates front-end and back-end technologies and work on user interfaces for both students and teachers. This project has custom dashboards, login authentication and authorization, database storage solutions, a blog that uses a CMS to populate data and an email/newsletter service.
Languages:
Technologies:
HTML:
Learned new ways of making HTML more semantic, in this project implemented modular headers,footers and other components that could be added together, learned about layouts and best practices, how to do image resets, as well as ways to increase SEO and improve accessibility.
CSS:
Used a plethora of fun CSS animations to make website dynamic and fast performance. CSS variables, Flex-box and Flex-grid all used to enhance webapp experience.
Typescript:
Used Typescript for my first major project, helped with debugging issues faster. Used Javascript event listeners for sticky navigation bar, sections appearing on scroll, lazy loading images and much more.
Node.js:
First project using node to write server side code, to create API integration and to download node packages to increase web app functionality. I used node package manager to download and install dependencies that helped make the web app functional and used node for the back-end of the web app, making API calls and importing.
Astro:
Decided to use Astro for this web app because it was planned to have a big blog/content presence and Astro was recommended for static-site generation to allow blog/content and main site pages to load quickly and increase overall conversions/SEO and make a better presentation for clients. Before using Astro, the web app was already being created, so one of my first issues that I overcame in this project was how to import and integrate the main pages into the Astro project that the blog was already being created from.
Firestore:
Implemented Firestore's database service which uses NoSQL architecture for web app functionality. I used their Rest API to send login data taken from login-form to authenticate and authorize users. I am currently working on using Firestore for user content management such as current assignments, lesson plans and activity levels to create high functionality.
Prismic:
Implemented Prismic's headless CMS API to create a blog that allows a simple-to-use dashboard for users to write and post blog articles to the web app. The first issues I successfully resolved were issues of content layout and integration. When rich text was received from the API, it came in looking rough and unorganized. I read documentation and resolved the issue by using Prismic's own SDK and functions to implement a serializer to help with content presentation and to maintain a certain style.
Git:
Used Git's version control system to manage different versions of website for alternative designs for client and for local fallback if accidental delete/alteration. Used GitHub to keep copy of web app online in case of local corruption/deletion of content.
Nano-Stores:
Because of the nature of the web app being made in Astro (static-site-generator) I required a way to manage state between components because Astro doesn't send JavaScript to client. I Used Nano-Stores for state management, allowing certain components that require hydration to get it from Nano-Store's atom creations, while keeping client side page load to be light and fast, to increase overall load times.