redfoxfinn / rff-project

Demonstration project by RedFoxFinn. GraphQL ♡ MERN-stack.

• 👋 Hi, I’m @RedFoxFinn
• 👀 I’m interested in sensor data, backend and data-dev but the frontend isn't stranger either
• 🌱 I’m currently student at the University of Helsinki, department of Computer Science
• 📫 How to reach me: development[dot]redfox{at}gmail.com

Some of my repositories here are programming assignments (both new and old can be found) and some are personal projects.

Languages and tools:

rff-project's Issues

frontend: actions CI

create GitHub Actions CI for frontend

tests: documentation

create test docs

backend: documentation

create backend docs

frontend: task list comment karma

comment voting +/- for logged users

frontend: task list comment removal

task list comment removal for admin/owner

frontend: dishy - ingredient / method removal

removal available for admin/owner

frontend: dashboard restyle

dashboard elements - restyle (current style broken)

frontend: dishy - dish removal

removal available for admin/owner

frontend: tasker add/remove/priority

Add functionality to add/remove tasks & change priority

frontend: transporter visual side

Visuals for transporter

frontend: task list commenting

list comments for logged users

frontend: integration tests

create tests using cypress

frontend: ui tests

with cypress

reopening reason: pending translations

frontend/backend: action CI - build

Frontend CI passing & Backend CI passing
= >> build CI: build + pages repository push

api/backend: tasker graphql & functions

checkup backend side of the tasker
-> alterations if/when needed

backend checked, ok.
frontend checked, caused by faulty fragments
-> fixed fragments (privateListDetails & groupListDetails)

frontend: admin tools - user management

Create user management feature

frontend: OpenCountries - restyling

countrylist needs more consistency

frontend: CSS refactoring

reorder CSS files & contents by the usage cases

frontend: tasker visual side

Add visuals for tasker

frontend: task list removal from ui

tasker should have removal for task lists

api: documentation

create api docs

frontend admin tools restyle

admin tools elements - restyle (current style broken)

frontend: documentation

create frontend docs

frontend: transporter graphql

Graphql for transporter

frontend: dishy details

Add detail views for ingredients, dishes, methods

frontend: translations

translations: EN/FI

tests: integration tests @ staging build

frontend: tasker graphql

Add graphql for tasker

frontend: dishy - dish karma

dish voting +/- for logged users

Katselmointi

Katselmointi

Terve @RedFoxFinn! Tässä lyhyt katselmointi Full Stack kurssin projektistasi.

Käytettävyys

Mitä tein?

• Rekisteröin uuden käyttäjän ja kirjauduin sisään
• Testailin Calculate-sovellusta
• Testailin OpenCountry-sovellusta
• Testailin Dishy-sovellusta
• Testailin Tasker-sovellusta
• Kirjauduin ulos

Kokemus

• Selkeä käyttöliittymä, dark/light-teemavalinnoista plussaa. Hyvää työtä! 🥇
• Calculate-sovelluksessa negatiivisen luvun neliöjuureksi tulee NaN
• Dishy-sovelluksessa "Save dish"-napin painaminen ei tunnu tallentevan annosta eikä käyttöliittymässä näy mitään virheilmoitusta

Koodi

• Frontend-puolen koodi on selkeästi organisoitua, hyvä!
• react-routerin Route-komponentin antamia propseja ei tarvitse siirtää lapsille, vaan routerin tilan saa tarvittaessa react-routerin tarjoamilla hookseilla: https://github.com/RedFoxFinn/rff-project/blob/frontend/src/App.js#L134
• Älä määrittele React-komponentteja renderöinnin aikana, vaan siirrä ne renderöinti-fuktion ulkopuolelle: https://github.com/RedFoxFinn/rff-project/blob/frontend/src/App.js#L151
• Apollo-clienttien konfiguroinnit voisi siirtää muualle: https://github.com/RedFoxFinn/rff-project/blob/frontend/src/App.js#L151
• Maatiedot kannattaisi hakea "laiskasti", eli vasta kun niitä tarvitaan: https://github.com/RedFoxFinn/rff-project/blob/frontend/src/App.js#L104
• Redux actioneiden tyypit kannattaa tallentaa const-muuttujiin typojen välttämiseksi ja refaktroinnin helpottamiseksi. Jos reducereita on monta kannattaa prefiksata tyypin nimi reducerin nimellä, esim:

const SET_CARB_SEARCH = 'dishy/setCarbSearch';

// ...

const DishyReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_CARB_SEARCH:
    // ...
  }
};

• Globaalit tyylit voisi importata jo index.js-tiedostossa: https://github.com/RedFoxFinn/rff-project/blob/frontend/src/components/Calculate.js#L10
• Tyylejä kannattaa eritellä niitä käyttävien komponenttien mukaan esim. omiksi kansiomoduuleikseen:

Dishy/
  - index.jsx
  - style.css

Tyylien luokkien nimissä voi käyttää komponentin nimeä etuliitteenä, esim. .Dishy__dishList ja .Dishy__dishListItem. Tämä vähentää riskiä luokkien nimien yhteentörmäyksessä. Modernimpi ratkaisu tähän ongelmaan on css-moduulit.

• Lomakkeiden tilanhallinta on hoidettu melko siististi, mutta kun lomakkeen koko kasvaa tai sen logiikka monimutkaistuu, on usein kätevää käyttää jotain lomakkeen tilanhallinnan hoitavaa kirjastoa, kuten Formik

• Myös backend-puolen koodi on selkeästi organisoitua, hienoa!

• GraphQL-apin resolvereita ja tyyppimäärityksiä kannattaisi eritellä, ettei kaikki olisi samassa tiedostossa. Tässä yksi esimerkki, miten tämän voisi organisoida: https://github.com/Kaltsoon/rate-repository-api/tree/master/src/graphql

Kokonaisuus

• Hyvä kokoelma pieniä eri käyttötarkoitukseen soveltuvia sovelluksia
• Koodi on kaikin puolin hyvin organisoitua ja melko laadukasta, mutta myös refaktoroitavaa löytyy

frontend: transporter add/remove

Functionality to add/remove tracked stops in transporter

frontend: dishy new dish creation

Create new dish creation