├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.css ├── App.js ├── App.test.js ├── components │ ├── helpers │ │ └── alerts.js │ ├── layouts │ │ ├── Footer │ │ │ ├── Footer.js │ │ │ └── index.js │ │ └── Header │ │ │ ├── Header.js │ │ │ └── index.js │ └── validator │ │ └── index.js ├── index.css ├── index.js ├── logo.svg ├── modules │ ├── App │ │ ├── App.js │ │ ├── Routers.js │ │ └── index.js │ ├── Courses │ │ ├── AddCourse.js │ │ ├── CourseDetails.js │ │ └── index.js │ ├── Students │ │ ├── AddStudent.js │ │ ├── StudentDetails.js │ │ └── index.js │ └── redux │ │ ├── actions │ │ ├── listActions.js │ │ └── types.js │ │ ├── reducers │ │ ├── index.js │ │ └── postReducer.js │ │ └── store.js ├── serviceWorker.js └── styles │ └── bootstrap4.0.min.css └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ###### 2 | # React Redux APP 3 | 4 | ## System Requirements 5 | 1. Node (Version 10.13.0) 6 | 2. NPM (Version 6.5.0) 7 | 3. 1 GB Ram(at least) 8 | 4. Apache Web Server(Version 2.4) 9 | 10 | 11 | ## Technologies Used 12 | 1. React for frontend 13 | 2. Redux for Memory 14 | 15 | ## Project Setup 16 | 1. Git clone the repository. 17 | 2. Run npm install to load Node dependencies to root of project folder. 18 | 19 | ```shell 20 | npm install 21 | ``` 22 | 3. NPM start to run this project 23 | 24 | ```shell 25 | npm start 26 | ``` 27 | ## Folder Structure 28 | ``` 29 | . 30 | +-- public 31 | +-- src 32 | | +-- components 33 | | +-- modules 34 | | +-- 35 | | +-- styles 36 | | +-- img 37 | +-- Node_modules 38 | ``` 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.6", 8 | "react-dom": "^16.8.6", 9 | "react-notifications": "^1.4.3", 10 | "react-redux": "^7.0.3", 11 | "react-router-dom": "^5.0.0", 12 | "react-scripts": "3.0.1", 13 | "react-select": "^3.0.3", 14 | "redux": "^4.0.1", 15 | "redux-thunk": "^2.3.0" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahtab28/reactredux/4cc109cc96273b0d0f42f6a9f4875ecaa7b5ff2c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 |
28 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Main from './modules/App/' 3 | 4 | function App() { 5 | return ( 6 |
7 | ); 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/helpers/alerts.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {NotificationManager} from 'react-notifications'; 3 | import 'react-notifications/lib/notifications.css'; 4 | 5 | export default class Alerts extends Component { 6 | 7 | /* create information alerts*/ 8 | info( message, title ){ 9 | NotificationManager.info( message, title ); 10 | } 11 | 12 | /* create warning alerts*/ 13 | warning( message, title ){ 14 | NotificationManager.warning( title, message ); 15 | } 16 | 17 | /* create success alerts*/ 18 | success( message, title ){ 19 | NotificationManager.success( title, message ); 20 | } 21 | 22 | /* create error alerts*/ 23 | error( message, title ){ 24 | NotificationManager.error( message, title ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/layouts/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => ( 4 | 9 | ); 10 | 11 | export default Footer; 12 | -------------------------------------------------------------------------------- /src/components/layouts/Footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Footer'; 2 | -------------------------------------------------------------------------------- /src/components/layouts/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import './../../../styles/bootstrap4.0.min.css' 4 | 5 | class Header extends Component { // eslint-disable-line react/prefer-stateless-function 6 | render() { 7 | return ( 8 | 9 |
10 | 32 |
33 | ); 34 | } 35 | } 36 | 37 | export default Header; 38 | -------------------------------------------------------------------------------- /src/components/layouts/Header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Header'; 2 | -------------------------------------------------------------------------------- /src/components/validator/index.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | export default class Index extends Component { 4 | 5 | /* create information alerts*/ 6 | validateCourse(data, courses){ 7 | try { 8 | let course = data.target.course.value 9 | if( courses.findIndex( list => list.name === course) === -1 ){ 10 | courses.push({id: this.generatItemId(courses), name: course}) 11 | return {courses:courses, success: 'Course has been added successfully!'} 12 | } 13 | else 14 | return {courses:courses, error: 'Duplicate course name!'} 15 | } catch (e) {} finally { } 16 | } 17 | 18 | /* get item id*/ 19 | generatItemId( items ){ 20 | return items.length+1 21 | } 22 | 23 | /* 24 | * Student Data Store 25 | * @params data Array | Students Array 26 | */ 27 | validateStudent(data, students){ 28 | try { 29 | 30 | let target = data.target 31 | let rollnumber = target.rollnumber.value 32 | 33 | if( target.name.value && target.age.value && target.course.value ){ 34 | 35 | students.push({id: this.generatItemId(students), name: target.name.value, rollnumber: rollnumber, course_id:target.course.value, age: target.age.value}) 36 | return {students:students, success: 'Student has been added successfully!'} 37 | } 38 | else 39 | return {students:students, error: 'Please check required fields!'} 40 | 41 | } catch (e) { 42 | 43 | return {students:students, error: 'Something went wrong. Please try again!'} 44 | } finally { } 45 | } 46 | 47 | /* 48 | * Delete Student Data From Store 49 | * @params data Array | Students Array 50 | */ 51 | deleteStudent(id, students){ 52 | try { 53 | let target = students.findIndex( list => list.id === id) 54 | if( target > -1 ){ 55 | students.splice( target, 1 ) 56 | return {students:students, success: 'Student has been deleted successfully!'} 57 | } 58 | else 59 | return {students:students, error: 'Student Already deleted or Not Exist!'} 60 | } catch (e) { 61 | 62 | return {students:students, error: 'Something went wrong. Please try again!'} 63 | } finally { } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | .m-h-4{ 15 | height: 40px!important; 16 | margin-top: 34px!important; 17 | } 18 | .container{ 19 | min-height: 527px; 20 | } 21 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/modules/App/App.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {Provider} from 'react-redux'; 4 | import store from './../redux/store' 5 | 6 | import Routers from './Routers' 7 | import {NotificationContainer} from 'react-notifications'; 8 | import { BrowserRouter, Switch, Route } from 'react-router-dom'; 9 | 10 | /* header and footer components*/ 11 | import Header from './../../components/layouts/Header'; 12 | import Footer from './../../components/layouts/Footer'; 13 | /* all components with initial*/ 14 | import Cousres from './../Courses'; 15 | import AddCourse from './../Courses/AddCourse'; 16 | import Students from './../Students'; 17 | import AddStudent from './../Students/AddStudent'; 18 | 19 | const App = () => ( 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |