https://github.com/monikas5/mediafrontend

Media content management dashboard - Frontend
https://github.com/monikas5/mediafrontend

axios netlify react-bootstrap react-hook-form react-icons react-router-dom reactjs render responsive vertical-slice-architecture zod zustand

Last synced: 1 day ago
JSON representation

Media content management dashboard - Frontend

• Host: GitHub
• URL: https://github.com/monikas5/mediafrontend
• Owner: MonikaS5
• Created: 2024-11-01T20:30:33.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-11-02T17:50:42.000Z (3 months ago)
• Last Synced: 2024-11-25T21:38:13.555Z (2 months ago)
• Topics: axios, netlify, react-bootstrap, react-hook-form, react-icons, react-router-dom, reactjs, render, responsive, vertical-slice-architecture, zod, zustand
• Language: JavaScript
• Homepage:
• Size: 1.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Media Content Management Dashboard - frontend

This is ReactJavaScript app for CRUD(Create, Read, Update, Delete) operations

## Features

- Responsive Layout - Multi-devices compatibility

- Content Management System - Page for Listing, creating, viewing and editing

- SPA - single page application

- centralized state management - using zustand

- Image/ File upload support

- vertical slicing component-based architecture

- User Authentication - using zod

- Added bonus tasks- Image upload for thumbnail and Login page to access dashboard

- axios js library - for making http req from app to web service (client to server)

## Technologies used

- React - for UI(User Interface)

- React-bootstrap - for styling and responsiveness

- zustand - for centralized state management

- zod - for user authentication

- react-hook-form - for managing form

- react-icons - for icons

- react-router-dom - navigation and linking within SPA

- prettier - code formatter

- backend deployment - render

- frontend deployment - netlify

## package installation

- npx create-react-app filename

- npm i bootstrap

  - setting for bootstrap

  - index.js

    import "bootstrap/dist/css/bootstrap.min.css"

  - index.html (Bootstrap CDN for accessing bootstrap navbar)

    cached version of Bootstrap’s compiled CSS and JS

- npm i zustand

- npm i react-icons

- npm i react-router-dom

- npm i zod

- npm i axios

- npm i react-hook-form

- npm i @hookform/resolvers

- npm install --save-dev prettier

## `npm start`

- to start application

## `npm run build`

- for deployment