Table of Contents
We see the importance of being able to concentrate valuable information into a single area. By building a platform that allows the sharing of keystone information in upholding land fertility for future generations provided by The Institute of Education and Regenerative Communities to farmers; we can create a focal point of valuable information from our client to the farmers.
Alternatives to our solution could be a potential option, however, creating this project with the sole intention of providing educational programs to farmers, we are able to meet every need of our client that they desire. Using an open-source project could meet some aspects that our client needs but aren’t able to fully captivate their ideas. This is where we come in and build a website to fully materialize their ideas. By working with the client directly and understanding their vision, it allows us to satisfy their goals and adjust to any requirement they may have.
To introduce, educate small farmers, people who are interested in agriculture in regenerative landuse and connect farmers and organization in a convenient and efficient way.
An interactive website platform that supports and provides educational information about regenerative land-use program for intergenerational users.
Student participants, schools, farmers, landowners, land seekers, and funders.
Our product is an informative and interactive website that provides a way for farmers and people with interest about agricultural regenerative landuse. It is a non-profit, focusing on intergeneration interactive education for proper landuse.
- Pre-Requisities
- Install node.js at https://nodejs.org/en/
- Install Visual Studio Code IDE at https://code.visualstudio.com/
- Install git at https://git-scm.com/downloads
- Download
- Create or locate a directory for the repository
- Right click inside the directory and click "Git Bash Here" and a terminal will open
- Clone the repository by typing the following "git clone https://github.com/lzheng0212/JD_SLS1105.git"
- Now you should have a local copy of the project on your machine
- Installing project dependencies
- Now on your local machine where you have a copy of the project navigate into JD_SLS1105 -> interactive-web directory
- Right click and click "Git Bash Here"
- Type "code ." into the terminal and Visual Studio Code should have opened with the project files
- Open the terminal in Visual Studio Code and type "npm install" to install all dependencies for the project
- Once the dependencies have installed you should be able to run the website on your local machine
- Running Application
- Type "npm start" in the Visual Studio code terminal and the website should open with your browser
All sections can be expanded to read more!
The Post tab enables our client to post any informational & educational materials, blogs or news to the website. The users can click on any post to view the full text. (click to read more)
The Event page consists of a calendar that will display the events in the selected month. Users can use the buttons to navigate through months or use the month picker on the right to pick a month. (click to read more)
When clicking on a specific event, the event details will be shown.
The timeline will display the important events in descending time order. The important events can be of the organizations, or milestone in local agriculture, and etc... (click to read more)
The timeline events are displayed in a carousel style. By designing it not in a traditional timeline style, the users can view through all the timeline events in the order of time to learn more about the development of the organization.
The map page displays the organization's influence or footprint at the location pined. By hovering over the pin, you will see some details about the location. (click to read more)
The website is for a non-profit organization, donations will greatly help the organization with expense and planning of events. (click to read more)
We are using Stripe to facilitate payments, and to ensure security.
The FAQ section provides the users with common questions from people and answers from the organization. Users can also contact the organization through the form on the website to ask questions. (click to read more)
The page contains the form to send to the organization.
The admin portal is only for admin of the website. Through the portal, they can create/edit/delete posts, calendar events, timeline and map; as well as browsing quetsions from users, and post FAQ to the website. (click to read more)
- Post with images inside the content area is resizable now.
- After creating a post or events the categories field remain while other fields are cleared.
- If there are no post the footer moves too far up revealing blank space.
Hey, glad to see you here! You must be interested in our technical stack.
Here's a brief high-level overview of the tech stack the website uses:
- This project uses the React for constructing user interface. React is a user interface library coded with JavaScript. It is a tool to build components of the website for displaying.
- For persistent storage (database), the website uses the Firebase which allows for user authentication and data transaction.
For more information on the technologies that power this website, check out the Wiki from this project.