eventyret/devhangout

Final Exam Project for Code Institute

🧙‍♂️ Eventyret ❤️ Sponsor

Full Stack Magician (Angular/Typescript/Docker/Strapi)

I'm a developer with a love for building websites and apps that are not just functional, but also a pleasure to use. Angular and NodeJS are my weapons of choice, and when I'm not coding, you can find me playing around with Docker and TypeScript. I'm also part of the Strapi community, where I help build and maintain open-source projects. Oh, and I love memes too.

---

🧰 Languages and Tools

✍️ Latest Blogs

• 🐳 Docker with Strapi V4 🌟
• Strapi ⭐️ V4 with Docker 🐳 and Heroku
• 6 JS one-liners that save time.
• CSS Experimental Overview (Chrome)
• The VSCode Checklist
• A Day of Pull Requests

📊 Stats

👨‍💻 Simen's Coding Journey

I started my coding journey as a freelance web developer. Working for my self part time growing my business DigitalFairytales / Fairytales.dev From there I taken a bootcamp and upskilled to become who I am today. I have worked for a few companies and now I am working for a company called Luno. I also work part time as a mentor 🧑‍🏫 for Code Insistute teaching new people how to become developers themself. Looking them grow over the course of a year. I have a big passion for Strapi ⭐️ and recently became a Strapi Community Star ⭐️🙌 I have built some projects and tools that are open source so feel free to check out my pinned Repos below for some of them.

devhangout's Issues

Refresh Session

• Create Service
• Create Component
• Test Component
• Create Markup
• Style Component
• GetUsername - Set To localstorage
• Refresh Service to start in app.component

Profiles

• Create Component
• Create Markup
• Style Component
• Test Component
• Wire up Component
• Create Dynamic Dataflow
• Re-style with card style

Donation / Supporter Info Page

• Create Component
• Create Markup
• Style Component
• Testing Component
• Change Text
• Sell IT!

Info

• Create Component
• Copy styles from Landing
• Fetch Data from json

Profile Returns null on login

• Investigate why api returns null on user
• Apply fix
• Test

Post Updates

• Create Component
• Create Markup
• Style Component
• Wire up Component
• Make Forms Dynamic
• Testing Component

Readme

• Complete README for frontend
• Complete README for backend
• Explain Project
• Resources Added
• Credits Added
• List NPM Packages and projects
• Add info about fake users and Json Server

REST Api

• Install DJango REST Framework
• Add to Apps
• Added to Post & Comments App
• Added To User App
• Added to Skills App
• Added to Education & Experience App
• Add simpleJWT

Navbar

• Create Component
• Create Markup
• Style Component
• Wire up component
• Add Angular Router
• Dynamic change view depending on state

Infinite Scroll

• NPM Install
• Create Markup
• Create Service
• Create Function to grab all users

Accounts (Profile) App

• Create App
• Create Models
• Test Models
• Add REST Endpoints
• Relationship Check
• Add JWT To user
• Hyperlink API Links
• User Skills
• User Education

Login

• Create Component
• Create Markup
• Style Component
• Make Forms Dynamic
• Mock Backend (For Testing)
• Wire up Component

Uploads / Media

Makemigrations have been applied, but for now it detects it only on media/uploads

Docker Setup

Likes & Dislikes App

• Create App
• Create Models
• Test Models
• Add REST endpoints
• Relationship Checks

Authentication (Frontend)

• Create Service
• Wire up Service
• Add JWT Support
• Store JWT in Localstorage
• Refresh Token
• Fetch new Token
• [Mock Auth] (http://jasonwatmore.com/post/2018/05/23/angular-6-jwt-authentication-example-tutorial)

Design Mockups Adobe XD

• Create Mockup
• Design for mobile
• Design for Desktop
• Publish Link
• Add to Readme

Authentication (Backend)

• Add SimpleJWT
• Update requirements.txt
• Test JWT
• Setup routes
• Add Custom Settings
• Setup expiry time

Fake Github Page

• Create Component
• Create JSON
• Style Component
• Test Component
• Mimic Github Design
• Insert Fake data

Database Design

• Create Database Layout
• Create Database Diagram

Fake Github Data

• Fake Folders
• Fake files
• Static Fake MD file

Donation App

• Create App
• Create Models
• Test Models
• Add REST endpoints
• Relationship Checks

ErrorHandling

• Service Errors
• Api Errors
• Testing
• Signup Errors
• Create Error Page
• Move user to Error page if undefined

Feed

• Create Component
• Create Markup
• Style Component
• Wire up Component
• Testing Component
• Upvote Posts
• Downvote Posts
• Make Forms Dynamic

Footer

• Create Component
• Create Markup
• Style Component
• Test Component

ErrorHandling

• Status codes on POST (201,404,400)
• Status codes on GET (201,404,400)

Donation / Supporter Modal

• Create Component
• Create Markup
• Style Component
• Make Forms Dynamic
• Wire up to Stripe
• Testing Component
• Adding name to header
• Change context depending on success failure
• Post to backend

Dividers

• Create Component
• Copy Styles from Landing
• Fetch Data from json

Docker Setup

• Create Dockerfile (Dev)
• Create Docker-compose file

Signup

• Create Component
• Create Markup
• Style Component
• Make Forms Dynamic
• Mock Backend (For Testing)
• Wire Up component
• Re-do if statement depending on status code.
• First Visit - True or False

Navigation Timeout

If the token times out, we are unable to view the user unless we get a new token.

• Dependant on Refresh Service
• Display Login if 401

Sections

• Create Component
• Copy Style from Landing
• Fetch Data from json
• Create App
• Craete Model

Experience & Education

It's not possible to add multiple experience or education fields for now

Landing page / Splash page

• Create Component
• Create Markup
• Style Component
• Sell the page
• Test Component
• Change colors
• Import Fake users
• Use Fake users for Testimonials
• Create Service
• Create Json data file
• Change Lorem Ipsum

Add / Edit Profile

• Create Component
• Create Markup
• Style Component
• Wire up Component
• Make Forms Dynamic
• Testing Component

Testing

• @media (min-width: 576px)
• @media (min-width: 768px)
• @media (min-width: 992px)
• @media (min-width: 1200px)
• Navbar and extra buttons need to be fixed

Import to SQL

Loading Spinner

• Create Component
• Create Markup
• Create Service
• Test Component
• Change loading text

Github Integration

• Add Service
• Wire up Service
• Add Service to Profiles Component
• Test Component
• Style Component
• Create Component
• Hook up form to component
• Add Fake users repo
• Create Fake data for fake users

Post & Comments App

• Create App
• Create Models
• Test Models
• Add Rest Framework
• Create Relationship

Education & Experience App

• Create App
• Create Models
• Test Models
• Add REST Endpoint
• Relationship Checks

Skills App

• Create App
• Create Models
• Test Models
• Add REST Endpoint
• Relationship Check
• Add UsersToSkills Relationship

Notifications

• Create Compnent
• Create Markup
• Style Component
• Create Service
• Add / Update Success Message
• Add / Update Error Message
• Donation Success Messager
• Donation Error Message
• Save Success Message
• Save Error Message

Server Setup

• Create Docker Container
• Setup Django Project
• Enviroment file setup
• Mysql Setup

Profile

• Create Component
• Create Markup
• Style Component
• Test Component
• Redesign?
• More stand out donation ribbon
• Hover on tiles ( Popover)
• Read more on user bio
• Add Devicons as dependancy
• Dynamic change from data
• Fix fake user params
• Add fake users to database
• List buttons to the right
• Scroll to top before loading

Dashboard

• Profile Wrapper Completed
• Add / Edit Profile Completed
• Add / Edit Experience Completed
• Add / Edit Education Completed
• Redo Design
• Removed Delete Account
• Add avatar to dashboard
• Responsive Design
• Change Avatar
• Change Background image (Only for donatiors)

Add / Edit Education

• Create Component
• Create Markup
• Style Component
• Wire up Component
• Make Forms Dynamic
• Testing Components

Authentication (Frontend)

Page Not Found

• Create Component
• Create Markup
• Style Component
• Wire up component
• Funny puns ?

Add / Edit Experience

• Create Component
• Create Markup
• Style Component
• Wire Up component
• Make Forms Dynamic
• Testing Component