Giter VIP home page Giter VIP logo

dscatalog's Introduction

DSCATALOG

Spring React Bootcamp project

image

image

UML Diagram

image

Back-end Skills

  • Create Spring Boot project
  • Create Git monorepo
  • Organize the project in layers
    • REST Controller
    • Service
    • Data Access (Repository)
  • Create entities
  • Configure project test profile
  • Database seeding
  • Create REST web services
    • @PathVariable route parameters
    • Request parameters @RequestParam
    • Request body @RequestBody
    • Response to the ResponseEntity request
  • DTO Standard
  • full CRUD
  • Exception handling
  • Postman (collections, environments)
  • Audit data
  • Data pagination
  • Associations between entities (N-N)
  • Automated testing fundamentals
    • Types of tests
    • Benefits
    • TDD - Test Driven Development
    • Good practices and standards
  • JUnit
    • Basic (vanilla)
    • Spring Boot
      • Repositories
      • Services
      • Resources (web)
      • Integration
  • Mockito & MockBean
    • @Mock
    • @InjectMocks
    • Mockito.when / thenReturn / doNothing / doThrow
    • ArgumentMatchers
    • Mockito.verify
    • @MockBean
    • @MockMvc
  • User and Profile Data Model
  • Validation with Bean Validation
    • Annotations
    • Customizing the HTTP response
    • Customized validations with bank access
  • Authentication and authorization
    • Spring Security
    • OAuth 2.0
    • JWT Token
    • Route authorization by profile
  • Tips for Postman
  • Environment variables in the project with coalescence

Frontend skills

Layout and navigation

Skills

  • ReactJS
    • Project creation
    • Project structure
    • Components
    • Imports
    • Use of images
  • Layout
    • HTML
    • CSS
      • Manual styling
      • Flexbox -Bootstrap
      • Responsiveness
    • Figma project execution
  • Routes
    • React Router DOM
    • Routes and links

API integration

Skills

  • Props
  • More about layout
    • ProductDetails screen
    • Catalog screen
    • Admin Screen
  • More about Routes
    • URL Parameters
    • Hierarchies (nesting)
    • Redirects
  • Integration with back end
    • Axios
  • React Hooks
    • useState
    • useEffect
  • Effects: “loaders”
  • “root” forms
    • Event handling
    • Form state manipulation
    • Form submission

Authentication and authorization

Skills

  • Forms
    • React Hook Form
    • Form validation, regular expressions
    • Error messages and conditional styling
  • OAuth2 Login
    • Interceptors
    • LocalStorage
      • Data access
      • JSON parse/stringify
  • Global state with Context API
  • Authentication and authorization flows
    • Protected routes
    • Login and authorization redirects
    • Special redirects for user experience (UX)
    • Route-level permissioning
    • Content restriction (UI) based on user profile

CRUD, pagination, filters

Skills

  • Responsive CRUD
    • Data listing
    • Form
    • Insertion, editing and removal
  • Communication between components with events (observer pattern)
  • React Hook Form
  • Integration of libs with React Hook Form
    • React Select
    • React Currency Input Field
  • Other libs
    • React Pagination
    • React Toastfy
  • Data filtering
  • Reference control with useCallback hook

Testing and deployment

Skills

  • JEST and Testing Library
  • JS/TS function tests
    • Test execution, watch mode
    • Describe block and test suite
    • Mock functions with spyOn
  • React component testing
    • Unit and integration tests
    • Mock functions with jest.fn()
    • Mock requests with MSW
    • React Router DOM Mock
    • User interaction simulation
    • Fixtures
    • Form inputs
    • Form submission
  • Deployment with CI/CD -Netlify

dscatalog's People

Contributors

jota-erre-jr avatar

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.