CRUD app with MERN stack

CRUD app with MERN stack
0

Hello all, I have to build an app that stores list of students, every student should have name, date of birth hobby and photo, all this should be stored in database. I picked MERN because im most familiar with and i don’t know how to handle with images, how to store them in mongoDB and update if needed. I managed to do create update and delete student but without photo, i don’t know how to handle image to store them in mongoDB and update if needed. Images will be small so GridFS is not a good idea in my opinion. Please for any help.

Probably not a good idea to store the images in the DB directly, you can use a host like cloudinary to store the images and access the links to the images via their API in Node. They give you API access just for this purpose

1 Like

For personal or curriculum project apps, I’ve typically stored the images in Dropbox and the image URLs in the database. It’s slow, but not terribly so.

cloudinary Nodejs SDK, is decent and gives you a bunch of free images you can store, and also gives you uploading capabilities from with in your app

https://cloudinary.com/documentation/node_integration

Hello guys I have problem with my app I have build it without redux and after I create student or edit student i need to refresh app to display new data on the list.

Edit student component

import React, { Component } from 'react'
import axios from 'axios'

export default class EditStudent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            firstName: '',
            lastName: '',
            dob: '',
            hobby: ''
        }
    }
    componentDidMount() {
        axios.get('http://localhost:5000/api/students/' + this.props.match.params.id)
            .then(response => {
                this.setState({
                    firstName: response.data.firstName,
                    lastName: response.data.lastName,
                    dob: response.data.dob,
                    hobby: response.data.hobby
                });
                console.log(response)
            })
            .catch(function (error) {
                console.log(error);
            })

    }

    onChangeFirstName = e => {
        this.setState({
            firstName: e.target.value
        });
    }
    onChangeLastName = e => {
        this.setState({
            lastName: e.target.value
        });
    }
    onChangeDateOfBirth = e => {
        this.setState({
            dob: e.target.value
        });
    }
    onChangeHobby = e => {
        this.setState({
            hobby: e.target.value
        });
    }

    onSubmit = (e) => {
        e.preventDefault();
        let updatedStudent = {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            dob: this.state.dob,
            hobby: this.state.hobby
        };
        axios.put('http://localhost:5000/api/students/' + this.props.match.params.id, updatedStudent)
            .then(res => console.log(res.data));

        this.props.history.push('/');
    }

    render() {
        return (
            <div style={{ marginTop: 10 }}>
                <h3 align="center">Update Business</h3>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <div className="row">
                            <div className="col">
                                <label htmlFor="lastName">First Name: </label>
                                <input
                                    type="text"
                                    className="form-control"
                                    name="firstName"
                                    id="firstName"
                                    value={this.state.firstName}
                                    onChange={this.onChangeFirstName}
                                />
                            </div>
                            <div className="col">
                                <label htmlFor="lastName">Last Name: </label>
                                <input
                                    type="text"
                                    className="form-control"
                                    name="lastName"
                                    id="lastName"
                                    value={this.state.lastName}
                                    onChange={this.onChangeLastName}
                                />
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label htmlFor="dob">Date of birth: </label>
                        <input
                            className="form-control"
                            type="text"
                            name="dob"
                            id="dob"
                            value={this.state.dob}
                            onChange={this.onChangeDateOfBirth}
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="hobby">Hobby: </label>
                        <textarea
                            className="form-control"
                            type="text"
                            name="hobby"
                            id="hobby"
                            value={this.state.hobby}
                            onChange={this.onChangeHobby}
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="photo">Photo: </label>
                        <input
                            className="form-control-file"
                            type="file"
                            name="photo"
                            id="photo"
                            onChange={this.fileSelectedHandler}
                        />
                    </div>
                    <input type="submit"
                        value="Update Business"
                        className="btn btn-primary" />
                </form>
            </div>
        )
    }
}

list component

import React, { Component } from 'react'
import TableRow from '../TableRow/TableRow'
import axios from 'axios'

export default class StudentList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            students: []
        };
    }
    componentDidMount() {
        axios.get('http://localhost:5000/api/students/')
            .then(response => {
                this.setState({ students: response.data });
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            })
    }
    tabRow() {
        return this.state.students.map(function (data, i) {
            return <TableRow student={data} key={i} />;
        });
    }
    render() {
        return (
            <div>
                <h3 align="center">List of Students</h3>
                <table className="table table-striped" style={{ marginTop: 20 }}>
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Date of Birth</th>
                            <th>Hobby</th>
                            <th>Photo</th>
                            <th colSpan="2">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.tabRow()}
                    </tbody>
                </table>
            </div>
        )
    }
}