HI, I’m Moulahi Mohammed

Full Stack Developer
{ { Angular / Vue / Node } }

Contact Me

About Me

Full Stack developer
{{Angular/Vue/Node}} with 3 years of ongoing Web-development experience using Responsive Web Design & Problem solving.

Skills

Soft Skills
- Organisation | Perseverance and motivation | Teamwork
- Problem solving | Adaptability | Time Management | Creativity
Fundamentals
- Html | Css | Javascript ( ES6 Features )
- TypeScript | Sass | Github | Wordpress
- Npm | Webpack | Babel | Eslint | REST API
FrameWorks
- Css : Bootstrap | Materialize css
- Javascript : Angular | Vue | jQuery ( as a library )
Angular
- Angular Router | Angular Http | Angular Forms
- Angular Material | Angular Animation | Rxjs
- AngularFire | NgRx
Vue
- Vue : Vue CLi | Vuex | Vue Router | Vuetify
Backend
- FireBase : Firestore | Authentication | Storage | Hosting
- Node js : Express js | MongoDb | Postman

Some Personal Projects

SPA /Node js Projects

Landing Pages

Ng - Moulahi Shop

Technologies Angular ,Angular Material AngularFire for ( Firestore,Ath,Storage,Hosting ) Reactive / Template driven Forms Angular Anmitaion, Rxjs , NgRx Type Personal Project E-commerce website

Project built with angular check more details in the link

Site

Angular / Node js -APi Products

Technologies Angular ,Angular Material Node js , Expresse ,Mongodb (Mongoose) filtring, security ,file uplaod,Auth for users Angular Anmitaion, Rxjs Type Full stack Application Building E-commerce RESTApi

Full stack project built with angular and node js check more details in the link

Site

Vue / Node js -APi (Video Games)

Technologies Vue,Vuex,axios Node js , Expresse ,Mongodb (Mongoose) Filtring, Security ,File uplaod,Auth,Mails sending Angular Anmitaion, Rxjs Type Full stack Application Building Video Games RESTApi

Full stack project built with angular and node js check more details in the link

Site

Ng - Blogger/News

Technologies Angular ,Angular Material AngularFire for ( Firestore,Ath,Storage,Hosting ) Reactive / Template driven Forms Angular Anmitaion, Rxjs , NgRx Type Personal Project Blog / news

Project built with angular check more details in the link

Site Github

Pharmacie

Technologies Html , Css Sass , Bootstrap JQuery , Js (ES6) Clean Design Type Portfolio

A clean & beautiful user interface design ,a real responsive website for mobile first approach,with a clean and smooth anmiation

Site Github

I Am A Web Developer

Technologies Html , Css Sass ,JQuery Materialize css , Js (ES6) Anmitaion css Type Multi-Pages Website

A responsive multipage website built with Materialize css and mulltiple components from it,i also used randow images from unsplash.com just for test proposal.

Site Github

Quazzum

Technologies Html , Css Sass , Bootstrap Materialize css , Js (ES6) Animation Type Company landing page

A responsive website built with Materialize css,bootstrap utilities for layout using sass,i also used animation for fadeIn effects on scrolling.

Site Github

Nuno

Technologies Html , Css Sass , Bootstrap JQuery, Js (ES6) animation Type Company landing page

A responsive multipage website built with bootstrap4 ,jquery and used also animations on scrolling for a beautiful user experience.

Site Github

Project Purpose and Goal

Wodly, was intended to display my workouts in a simple way. Later I added multi-user support so others could add their own routines, and keep track of the ones they liked. This meant that I had to add user profiles, authentication and a more robust database.

My goal was to understand user authentication and the options that allow for a secure session. I also wanted to learn about database structures and figure out a way to manage data efficiently.

Web Stack and Explanation

Initially, it was intended to be a personal project without additional users. This is why I went straight into create-react-app and got a functioning prototype working as fast as possible. I added styled components and a redux store to make loading as fast as possible. Once my friends told me they wanted in, I had to re-think my approach. For the backend I wanted to try firebase user authentication and realtime database. I chose these because I wasn’t comfortable with the environment but I wanted to get better at it. Finally, I deployed the site to AWS Amplify, also a first for me.

Problems and Thought Process

Since most of the application’s frontend resembled a project that I had completed a few months ago, I was comfortable with that part. The only difference was that I wanted to challenge myself to write the whole application using React Hooks instead of class components.

Towards the end of the development process, I was finding myself using timers for most of the exercises. I tired every free app I could find but most were too ugly or too hard to use. This motivated me to code a simple timer where you can choose the number of rounds, time on the exercise and time for rest between rounds.

Checkout the timer here

Lessons Learned

Authentication was a big problem for me. Page refreshing was a big one, because it rendered the login screen for half a second (as it fetched the user’s information) until it loaded the actual page. This was happening because I didn’t want to store the user’s information in the browser’s local storage as it is easily susceptible to malicious attacks. After reading more about how firebase manages sessions, I realized that they actually store their data on the user’s browser but they validate it on their servers. Knowing this, I re-designed the authentication process and stored the user id on the browser’s local storage. Finally, I added a persisted state that re-hydrated the Redux store on reload.

I tried the React Context API instead of Redux to share states between components. Unfortunately, after making it work, I went back to Redux because I was more comfortable with their Chrome extension for debugging and monitoring.

Further work

Luckily, the lockdown situation that motivated me to start this project has ended for the time being. I want to add a smoother user experience and some data analysis to the workouts. I want to look for keywords within the workouts and be able to tag them accordingly. Hopefully in the future it will be harder to skip leg day.

HI, I’m Moulahi Mohammed

Full Stack Developer { { Angular / Vue / Node } }

About Me

Skills

Some Personal Projects

Ng - Moulahi Shop

Angular / Node js -APi Products

Vue / Node js -APi (Video Games)

Ng - Blogger/News

Pharmacie

I Am A Web Developer

Quazzum

Nuno

Project Purpose and Goal

Web Stack and Explanation

Problems and Thought Process

Lessons Learned

Further work

Full Stack Developer
{ { Angular / Vue / Node } }