A local marketplace app inspired by our neighbours--the help we need can often be found right next door.
This app enables people in your neighbourhood to connect and share resources, be it extra food, equipment loans, or specialised services. Feel free to explore the demo site here !
This is a group product done by a team of 3 full-stack developers as part of General Assembly's Software Engineering Immersive.
- Dive into The Neighbourly homepage -- your neighbourhood's vibrant community hub. Discover valuable posts and offerings from people staying near you.
- Engage by submitting requests for listings that interest you or extend a helping hand by creating your own "+ Add Offer" listing. Be sure to complete your listing with a clear photo!
- Your display name, registered neighbourhood, and bio are accessible on your profile page. It's the perfect spot to highlight your Neighbourly journey and the number of neighbours you've assisted!
- Manage and review your listings conveniently from your profile page.
- Explore detailed information about each listing by clicking on them. Here, you can perform edits or deletion.
- Stay informed about the status of your requests in the "My Requests" section.
- Monitor requests from neighbours seeking your assistance under the "My Listings" tab.
- Effortlessly navigate through Neighbourly with the user-friendly navigation bar, conveniently located in the corner.
- React
- JavaScript
- CSS
- Material UI
- Express.js
- Database: MongoDB
- Driver: Mongoose
- Image storage: AWS S3
- Location APIs: OneMap API
- Project management: Jira
- UI Wireframing and prototyping: Figma
- Design system: Material 3
- Data modelling: Lucidchart
All the backend code is in the Back-end directory. Run all backend commands from inside that directory.
Create a new .env file in the back-end directory and add the following lines:
PORT=5001
DATABASE=''
#Generate your own secrets
ACCESS_SECRET=''
REFRESH_SECRET=''
# AWS variables for image
BUCKET_NAME=''
BUCKET_REGION=''
ACCESS_KEY=''
SECRET_ACCESS_KEY=''
Add in your values here.
- The database url has to be for a mongoDB database.
- Generate your own Access Secret and Refresh Secret
- Add in credentials for your AWS S3 bucket
npm i
npm run dev
All the frontend react code is in the Front-end directory. Run all frontend commands from inside that directory.
Create a new .env file in the front-end directory and add the following lines:
VITE_SERVER=http://localhost:5001
npm i
npm run dev
Check out our Figma for:
- UI Wireframes
- Front-end component map
- Back-end Entity relationship diagram
- Users can leave each other reviews
- Users can add their favourite listing to watchlist
- In-app notifications
- Proper logout protocol
- Users are allowed to change their passwords
- Styling Material-UI Components using CSS
- Disable Box Shadow Globally for Material-UI Components
- Styling Material-UI Button Text Casing
- Centering a Component and Making It Responsive
- Customizing Material-UI Button Hover Colors
- Styling Material-UI TextField
- Removing Underline for React Router Link
- React Router onClick Redirect
- Optional Chaining with Arrays and Functions
- Material-UI Divider Thickness
- Material-UI Date Picker Validation
- Making Material-UI DatePicker Required