Welcome to our group 2 project made by Elyas, Seb and Joanna for a TechNative Digital using React, Javascript, Redux, CSS, React Router, Font Awesome, a RESTful API and chatGPT AI API. We worked towards a brief and developed the website over 5 days using Git, Github and Trello for our workflow.
Dargon is our proof of concept. It's a LLM AI trained on ALL the possible dagron media we could find: from Game of Thrones to Pete's Magic Dragon. It can tell you all about the realm of Sovngarde, speak to you in basic Draconic and Dovazhul or explain how to behave with different castes of dagron - right up to the Golden Kings.
We feel like everyone should be able to chat to a dagron whenever they want, so Dargon is free to use. Just try not to piss it off... Even as an AI, it's pretty temperamental.
Big shout out to Seb's brother for providing us with a really cool image!!!
Here is the image:
Click link here to view the website!
Day 1
- We spent the whole day planning our approach, tools, workflow, design and schedule
- We decided on a mobile-first approach with regards to development
- Git and Github were set up with rules protecting the main branch
- We went through the brief developing tasks and prioritising specific parts based on importance
- We openly communicated about our strengths and weakenesses to make sure we were working on things we were comfotable with
- Workflow was based on a bespoke task management system using Trello and a traffic light system to base priority
- We decided upon a feedback approach for transparency wherein we did a task and asked for feedback to make sure everyone was on the same page
- We decide on an all day call due to the complexity of the brief
- We created a file structure that would be used for the rest of the time
- Prettier config was set up for consistency amongst codebase structure
- package.json was developed to hold all dependencies shared
- Netlify was deployed for live debugging
- Developed a global CSS that was scaled throughout the project and made design consistent
- We discussed the schedule for the next few days to discuss deadlines and priority
Day 2
- This was the first day where we developed our daily structure for the next couple of days. It would be individual programming in the morning, a lunch break and then group coding in the afternoon.
- We worked on routing using react-router
- Git and Github were set up with rules protecting the main branch
- Header was developed with navigation and logo following brief design
- We openly communicated about our strengths and weakenesses to make sure we were working on things we were comfotable with
- Ask page design was developed
- We created a state management using redux toolkit developing a slice of state and a store with actions and reducers
- Created an AsyncThunk to connect to chatGPT API for queries
- Used data from RESTful API to render result cards based on query
Day 3
- Individual programming in the morning was based on page-building
- A big focus on JSX, component, CSS and design with page development
- Home page and About page development
- In the afternoon, we developed a file system for the products page
- Focused on developing design for products page basing tasks on priority, functionality and accessability
- Afterwards we did individual programming based on prefernce and urgence
- Products data was developed and connected to RESTful API
- Products page developed with form containing input and button.
- Product cards were developed to render products.
- Header was changed to show animated scales to make it more specific to the dragon theme
Day 4
- We took a different approach today completely where all day would be group programming
- We focused on adding to our scalable redux store for the products
- Products slice was developed together and connected to RESTful API to render appropriate data
- We fixed filtering using the form and the products slice.
- Throughout our afternoon we undertook quality assurance by going through the website, codebase and creating tasks based on what would enhance the website.
- Fixed header, footer, maintcontent components
- Styling for homepage, askpage and aboutpage
- Changed font-family for headers and body text
- Improved funcionality of form in the askpage by disabling ask button if requirements are violated
- Fixed navigation on homepage
- About page tabs fixed
- Responsivenses in home page, askpage and aboutpage all fixed
- Fixed visibility of text in header and menu
- Refactored code by removing element styles
- Created a resetState reducer to re-render cards in askpage
- Added a metadescription to the index.html
Day 5
- We continued our quality assurance in the morning with a focus on accessibility, the prdoucts page, product card and refacotring
- We updated design for the products page and products fornn and made it according to the brief
- Siteheader element css was removed styles were updated
- Homepage changed image and spacing
- Index.css updated buttons globally
- Product card design were fixed to give a 3d view
- Fixed askpage rendeering when navigating away by implementing a useffect to handle side effects
SEB'S BROTHER!!: https://www.instagram.com/jshdavies/?hl=en-gb
Trogdor: https://www.reddit.com/r/AssassinsCreedValhala/comments/juwwu0/trogdor_the_burninator_easter_egg/
American Dragon: https://www.deviantart.com/pannyfrannbuesa/art/American-dragon-Jake-Long-grown-up-Drawing-II-926508484
Themberchaud: https://www.conceptartassociation.com/2023-caa-finalists/sakk8g7jxl9l84n-k753j-743dr-hbr2s-m4hx5-rtc9f-pnym4-s9jpl-dwmfz-kem9r-elnwx-sght3-jnccf-6m5gs-d3pbx-mejk2-k5wdt-hgp8n-wj8bp-z9adz-dgstn-w8sdf-a28nw-5dttx-cmhss-k4zwr-7bxe2-8hxbp-kjt49
Robin Hobb: https://www.pinterest.co.uk/pin/the-rain-wilds-chronicles-by-robin-hobb-spoiler-free-review--809310995552406716/
