This project was bootstrapped with Create React App.
THE BIGGEST SOURCE FOR GRETA THUNBERG'S FRIDAYS FOR FUTURE INFORMATION IN THE FORM OF IMAGES, MOVIES, TEXT AND ARTICLES
This is a fan website built using ReactJS Material-UI for frontend and React Redux with Firebase Firestore as backend.
(we are looking for contributors to help build this site!)
A website for Greta Thunberg Fridays For Future and for Greta's different engagements, such as award ceremonies, nominations, events and personal happenings. Practically everything about her journey. Greta Thunberg's concept is to every Friday make a protest, either outside or indoors, to let the world know about the climate and ecological crisis. One particularly important thing is the "weeks". Greta is now as-of writing on her 106'th week of protesting. By highlighting the "week" as a central organizer /, Fridays For Future have created their own time calendar era with the start at week ONE on Monday August 20 2018.
- Images, text, films and other files related to protests must be organized under "weeks". End users view a "week" and see only related material for that particular "week".
- Must show the climate and ecological crisis protest both in images, text, films and articles.
- All material Images, text, films and other files must be tagged and have a description.
- Searching for material must be straightforward using tags or keywords.
- End users must be able to edit/add description to any material simply by selecting it and "edit".
- End users must be able to upload new material (version 2.0).
- links to FFF and to Gretas Twitter, Facebook must exist.
- All material must be organized over a central timeline. Like adding an image or a set of images/files they all must be tagged with date/time to fit in the timeline
- All added material must be approved by role=admin regarding its correctness.
CHANGES:
- New Dashboard with Theming. This Dashboard is an outlining of features and the next step is to implement them. So have a look around and feel free to come with code to input.
CHANGES:
- FIxed the top navigation bar so it also works on mobile screens
CHANGES:
- Added Firebase full login flow. Check Navbar User icon for login.
- Note that most changes are still happening under the hood as of now.
CHANGES:
- Added React-Bootstrap Navbar addition
CHANGES:
- Added feature-add-items-overlay-with-options-like-download-open-change-description
CHANGES:
- This is now a development release for presentation only! This version is not production ready!
- Added support for docx, xlsx, mp3, pdf, mp4 and txt files to be shown in albums. (You can view demo files under week1 that will be removed later)
- Cleanup code with Eslint and Pretty print
CHANGES:
- Fixed: on mobile screen menu text too long pushed screen out.
- Fixed: Images with space in their names did not render in img added encodeURIComponent()
- System: Introduced React-Redux.
- Moved out all json files metadata into public folder as a prep for a new backend later
Changes:
- Just added the text "(we seek dev help if you're a Reactjs wizard please join)." in the Resume.json
- running some tests
Changes:
- Added component ShowBuildAndVersion to show app Version.
- Fixed when clicking the same album the TimelineViewer disappears.
- Get sponsors
- Full server backend location
- [ ]
- [ ]
A one page website easy access SPA.
If you want to help out we are very happy for that and you can chat with Us at Facebook! !
This is a Create React App ReactJs project. Considering the requirements and on-going iteration discussions, feel free to contribute with Pull requests.
To get starting developing you have to create a Firebase account and setting up your own credentials. Check Firebase.js for config, typically create some .env file in root for the constants.
- In the .env file at root the HTTPS=true is set to make Facebook login work-
- As of release V1.1.0: the Firestore-rules.json at root for Cloud Firestore.
At Cloud Firestore enable Sign-in providers:
- anonymous
That's it for now just text me from Facebook group and expect changes since it's early beta..
-
Continue building on the Dashboard features it's a blanks slate right now
-
Create Internationalization
-
Move json meta data to Firestore
-
The Menu header Toggle Button open a link page and all links need setup help.
-
In the Masonry the overlay for all items Docs, Tex's are not for mobile and need help
-
Proposal for a Top Menu search feature like autocomplete search to start with then expand it to look something like this
-
The structure for how albums "weeks" all the way to individual files images, movies and docs are going to be handled. Specifically that an "item" can have this metadata:
- Overall description text
- "fileData": "someImage.jpeg",
- "ratio": "0.7497371188222923", (all items not only images must have a ratio so Masonry can lay them out)
- "title": "Some title text",
- "description": "some description text",
- "size": "115603",
- "mediaType": "jpeg",
- "mimeType": "image/jpeg"
- Tag text
- coming more....
and that this metadata can be changed by end user. Basically different flows can be:
- User add an album containing images, movies and docs and every "item" must have the above metadata.
- User search for images, movies and docs and then the metadata is used by user to filter result.
- User add to an album a single images, movie or doc and by so must add the above metadata.
- Clone the repo:
> git clone https://github.com/erikswed/Greta-100-React-Web-App.git'- Install dependencies and run build command:
> npm install
> npm run build3 During dev use secure https://localhost:xxxx/ since Facebook require it. Disable this in .env file.
You can also test the app with a development server, just run:
> npm startFeel free to fork this project and help out
LGPLv3