Amazin' Store

Massive, komplexe E-Commerce-Plattform.

Intro mit Seller-, Admin-Backoffice:

Tech-Stacks

Frontend: Multi frameworks, React, Redux, Typescript, Nx Monorepo Microservices, Cypress, Swiper.
Backend: Node Js, Express Js, [Next Js], Mongoose, Cloud Mongo DB Atlas.
DevOps: Vercel, Heroku, [AWS].

PWA, QR code zum Installieren:

Screen SubNav SearchFilter Pagination:

Sort Filter Search Nav SideNav:

Responsive und Cross-Browser:

Multi Currency Shipping Payment Contact Profile Validate:

Content Management Product Image User Order:

Accessibility with Keyboard, Touch Functions:

• Datum: September 2020
• Branche: Business, eCommerce, Video, Entertainment
• Kategorie: Full Stack MERN + DevOps

Zoom Book

Ein Sozial MERN Web-App mit einige Funktionen wie Facebook und Zoom

Tech-Stacks

Frontend: Javascript, React, SASS, Photoshop..
Backend: Node.js, Express js, MongoDB, Mongoose,..
Andere: Swagger, Postman, Git, Docker, Github, Heroku,..

Zoom und Facebook in Einem

+ Video chat [Stringy API]

Dies ist die Haupt-App, beide Backend- und des Frontend-Teile sind auf gleichem Server (Heroku) oder unterschiedlichen Servern (Vercel, Firebase,..).
Diese Teile können auch separat verwendet / eingesetzt werden.

Backend Teil:
Github-Repo ZoomBookBE

Frontend Teil:
Github-Repo ZoomBookFE

Backend, APIs und Datenbank

Database MongoDB
Schema: Diagramm: app.diagrams.net

Deploy: Heroku
zoombook.herokuapp.com

Frontend UI, APIs & Story-Buch

APIs auf Swagger
swaggerhub.com API-Dokumente

Lastheft und Anforderungen:
1. Benutzer müssen sich anmelden, um etwas anderes als die Anmeldeseite zu sehen.
2. Benutzer können sich mit echten Facebook-Details anmelden (optional, deaktiviert).
3. Benutzer können Freundschaftsanfragen an andere senden.
4. Ein Benutzer kann die Freundschaftsanfrage annehmen, Freunde zu werden oder abzulehnen.
5. Benutzer können Beiträge erstellen und / oder Bilder hochladen / veröffentlichen.
6. Benutzer können Beiträge mögen / reagieren.
7. Benutzer können aus 7 Arten von Reaktionen auswählen (Like, Wow, Love ..)
8. Benutzer können Beiträge kommentieren.
9. Beiträge zeigen den Inhalt, den Autor, die Kommentare und Reaktionen (Likes) des Beitrags an.
10. Die Posts-Indexseite wird wie die echte Timeline-Funktion von Facebook angezeigt: Alle aktuellen Posts des aktuellen Benutzers und seiner Freunde.
11. Benutzer können ein Profil ohne Fotos erstellen: Standard-Avatar und Titelbild (Hintergrundbild) reserviert.
12. Die Benutzerhomepage enthält Profilinformationen, Avatar und Beiträge.
13. In der Seitenleiste "Kontakte" werden Freunde aufgelistet.
14. Jeder in der Kontaktseitenleiste aufgeführte Benutzer kann angeklickt werden, um ein (privates) Chatfenster zu öffnen.
15. In der Seitenleiste Benutzer werden zufällige Benutzer und Schaltflächen zum Senden von Freundschaftsanfragen aufgelistet.
16. Benutzer können das Profil mit ihren eigenen Fotos bearbeiten / aktualisieren: Hochladen eines Avatars und eines Titelbildes (Hintergrundbild) möglich.
17. Optional: Warnung E-Mail / Benachrichtigung und / oder vorübergehend deaktivierte IP / Konto für 24 Stunden durch 3x / 4x falsche Passwörter.

In Bearbeitung - TODO

Diese Funktionen werden als externes Modul betrachtet, das API und Vuejs von Drittanbietern verwendet. Teilprojekt: VChat Projekt Repo

18. Benutzer können einen Videokonferenzraum erstellen und einen Bildschirm freigeben.
19. Benachrichtigungen an alle / eingeladenen Freunde.
20. Benutzer können dem erstellten Videokonferenzraum über einen auf der Timeline veröffentlichten Beitrag ihrer Freunde beitreten.

• Datum: Oktober 2019
• Branche: Sozial Netzwerk
• Kategorie: Full Stack MERN Web-App

Bitma!n

Web-App für Mobile-Trader, Kryptowährung und Devisen-Händler, Mobile responsive, Full Stack MEAN, Phase 1: Frontend.

Tech-Stacks

Frontend: Angular, Node.js, Webpack, TypeScript, SCSS, ..
Backend: (Phase 2) Node.js, Express, Firebase BAAS/MongoDB/MySQL.
Andere: Webpack, Google Chart Visualisierung, Fx APIs..

• Datum: Mai 2019
• Branche: Finanz
• Kategorie: Software

Referenz: Furnitown

Unternehmenswebseite, SSG.

Tech-Stacks

Vanilla Javascript, jQuery, HTML, SCSS, Grunt, SVG Smart Path, Figma, Photoshop..

• Datum: 2018
• Branche: Allgemein
• Kategorie: Kommerzielle Unternehmenswebseite, Landing Pages.

Referenz: Vivo Smartphone

Kommerzielle Unternehmenswebseite, Webshop, SSG.

Tech-Stacks

Vanilla Javascript, jQuery, HTML, SCSS, Grunt, Figma, SVG Smart Path, Figma, Photoshop..

• Datum: 2019
• Branche: eCommerce
• Kategorie: Kommerzielle Unternehmenswebseite, Webshop, eCommerce

Referenz: Vinh Hao Vital

Kommerzielle Unternehmenswebseite, SSG.

Tech-Stacks

Vanilla Javascript, jQuery, HTML, SCSS, Grunt, Photoshop..

• Datum: 2017
• Branche: Allgemein
• Kategorie: Kommerzielle Unternehmenswebseite, Landing Pages.

Teilprojekte

Diese Projekte sind Bausteine für größere Projekte

NetMovies

Video-Web-App, MERN - TeilProjekt, MVP Frontend mit externen APIs.

Tech-Stacks

React Js, SCSS, Photoshop..

The BookMan

SSR Nodejs Web-App, API-Server, Backoffice CMS und Admin-Board.

Tech-Stacks

Node Js, Express Js, Pug, Bootstraps, MongoDB, Cloudinary..

• Datum: 2018 - 2020
• Branche: Allgemein
• Kategorie: Teilprojekt Frontend, Backend, APIs

...

Archive:

Tech-Stacks:

Vanilla Javascript, React, Next, Node.Js, ExpressJs, MongoDB, SQL, Github, Swagger, Postman, Pug, Bootstraps, CSS, HTML, SCSS, Gulp, Grunt, Photoshop, Figma, Jest, React Testing Library, Cypress, Bulma..

nTrix Backoffice

Basis-Frontend-Vorlage für Admin-Board, Backoffice-, CMS-Dashboard.

The Coffee House

Retro-Stil Webshop, Landing Pages, SSG

• Datum: 2016 - 2020
• Branche: Allgemein
• Kategorie: SSR, Frontend, Backend

...