Giter VIP home page Giter VIP logo

matcha's Introduction

Matcha educational project

Authors

Run application

To prepare configs you need to create .env file. Example of this file is .env.local file.

To prepare docker environment you need to create docker-compose.yml file from examples. For backend development use docker-compose.back.yml, for frontend - docker-compose.front.yml.

To build and run application use docker-compose up -d --build. All services will work on SITE_HOST param from .env file.

Now you can check web interface on http://{SITE_HOST}, http api on http://{SITE_HOST}:8080, websocket api on ws://{SITE_HOST}:8000 and etc.

Database

To configure a database you have to run next command:

docker-compose exec http ./migrate.php

Dir manual

client/     - react client app
config/     - DI, http routes and settings configuration
http/       - entry point of http server
migrations/ - DB migrations
runtime/    - cache files
socket/     - entry point of socket server
src/        - project source code
test/       - phpunit tests

HTTP manual:

GET /
POST /auth/login - allowed while guest
POST /auth/signUp - allowed while guest
POST /auth/logout - allowed while authenticated
PATCH /auth/confirm-email
GET /api/users - users search with parameters, allowed while authenticated
PUT /api/user - user update, allowed while authenticated

matcha's People

Contributors

charmingelle avatar strorch avatar vlvereta avatar

Stargazers

 avatar

Watchers

 avatar  avatar

matcha's Issues

User authentication

  • Connect registration to the API
  • Check registration flow (if exist, if NOT exist)
  • Connect login to the API
  • Check login flow (if exist, if NOT exist, if info added, if info NOT added)
  • Connect password restore to the API
  • Check password restore flow (if exist, if NOT exist)
  • Connect email validation to the API
  • Check email validation flow (page + loader)

Profile page

Make Profile page:

  • create general UI,
  • endpoint for fetching user by id,
  • flow for distinguishing self or not profile.

User login functionality and middleware

Simulate login functionality and create authentication middleware:

  • Create service to work with localStorage
  • Write login actions and mock for localStorage
  • Add functionality to catch logged in user and setting Store
  • Set up middleware and protect the app (some routes)
  • Think about registration flow and message page
  • Validation for SignUp, SignIn, Forgot forms (password validation!)

Designs for header and footer

Create simple design for those parts and:

  • Correct favicon
  • Correct logo
  • Basic view and actions in header
  • Design for logged in state view in header
  • Fix low resolution design in header (different header style by media query?)
  • Footer

Set initial info page

Finish it with full backend support:

  • endpoint for update user by current info,
  • endpoint for fetching/adding and deleting interests,
  • endpoint for adding/deleting user images and setting avatar.

  • flow for adding/deleting interests and updating their list (with selected row),
  • flow for adding user image and update the row,
  • replace flex by grid in showing images miniatures,
  • design and action for delete user image,
  • flow for setting image as user avatar,
  • come up with idea how to check were photos uploaded to allow save the form (validation?).

Registration and login forms

Create forms and prepare actions for connection to the API.
Is formik needed?

  • Registration form design
  • Registration form actions
  • Login form design
  • Login form action

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.