Resource Wall is a resource sharing site that allows users to save and share learning resources (like tutorials, blogs and videos) in a central place, publicly available to any user.
It has been built using CSS, JavaScript, and EJS for the frontend, and NodeJS, Express, and PostgreSQL for the backend.
Homepage with All Resources:
View of My Favourites:
View Details of Specific Resource:
Add New Resource:
User Profile View:
This project was created, designed, and built by:
for our Midterm Project at Lighthouse Labs.
- Build a web app from start to finish using the tech and approaches learned to date
- Turn requirements into a working product
- Practice architecting an app in terms of UI/UX, Routes/API and Database
- Manage a multi-developer project with git version control
- Simulate the working world where we do not always get to select our colleagues, tech stack, or product features
- Collaborate, communicate, and project manage
- Simulate on the job structures and supports
- Practice demoing an app in a presentation to help prepare for the final project and employer interviews
While working to build this project to successful completion, we:
- Used git best practices (sans rebase) when working on a project with multiple members (branching and merging often), as well as the GitHub workflow (pull requests).
- Used the major steps of software development to execute the project; user stories, wireframes, ERD, Routes, etc.
- Collaborated effectively as a team to decide how to break out the work, setting up a good team structure and a pleasant and positive work dynamic.
- Engaged in a simulated on the job environment.
- Prepared and planned how to tailor our communication and presentation approach for a technical as well as and non-technical audience.
- Presented a web development project to a technical and non-technical audience.
- Had a lot of fun! 😃
Users can save external URLs along with a title, description, and image, and organize them using suggested topic categories
Search feature enables users to find already-saved resources that have been created by any user
Users can add a comment to any resource, for others to view
Users can view and update their profile
Users can rate any resource
Users can 'like' a resource, to add it to their favourites for quick access at a later time
Users can view their entire collection of saved resources, including ones they have 'liked', in a single place
Users can view details about a single resource, the average user rating, and any comments added
- Express
- NodeJS 10.x or above
- npm 5.x or above
- cookie-session
- dotenv
- nodemon
- node-postgres
- Morgan
- EJS
- PostgreSQL 6.x
- jQuery
- SASS
- Fork this repository to your own GitHub account.
- Clone your fork onto your local device.
- Install all dependencies using the
npm install(ornpm i) command.
- In a terminal window, connect to your PostgreSQL environment using
psqland your login credentials.- In some environments, the
startpostgrescommand may need to be run first.
- In some environments, the
- Create a new database using the
CREATE DATABASE resourcewall;command, where 'resourcewall' is the name you want to call this new db. - Connect to the new database with the
\c resourcewallcommand, where 'resourcewall' is whichever name you chose for your new db in the the previous step.
- Using the provided
.env.examplefile as a template, create a new file named.envin the same folder. - Add your database name, username, and password.
- Note: If running the app locally, the
DB_HOSTwould belocalhost, and for PostgreSQL thePORTwill usually be5432. - For security reasons, the
.envfile has been added to the.gitignorefile, so these sensitive details will not accidentally be published to GitHub.
- Note: If running the app locally, the
- Build the binding for your current node environment by running
npm rebuild node-sassto recompile the package
- From the root folder, run the
npm run db:resetcommand. It runs through each database schema (table definitions) and seeds (inserts) file, in order, and executes them against the database.- This command should be run each time there is a change to the database schema or seeds.
- Note: you will lose all newly created (test) data each time this is run, since the schema files will tend to DROP the tables and recreate them.
- Ensure you are running
psql. - From the project root folder, start the web server using the
npm run localcommand. The app will be served at http://localhost:8080/. - Navigate to http://localhost:8080/ in your browser.
- Start adding or browsing resources! 🙂