Currently in the process of porting all aspects of the page to react+astro components Track Progress Here
Welcome to DevBits, your go-to social media platform designed exclusively for developers. Connect, share, and explore the world of coding with like-minded individuals. Whether you're a seasoned developer or just starting your coding journey, DevBits is the place to be.
Created by: Jonathan Groberg , Armanie Feliciano, and Xabier Jones
Try the live site!
Create your own user or login with as
test
with password:test
- Ability to log in or create account
- Intutitive and leave user interface design
- Intuitive user feedback
- Login failure message
- Logging in loading animation
- Create a user by inputing required values for you Name, Username, and Password
- If no such account exists your registrations will be successful and you will be redirected to the posts page
- By submitting the register button you will be agreeing to our terms and conditions and privacy policy which can be viewed by clicking the hyperlinks
- The posts page, allows developers to share their thoughts code snippets, and project updates
- Engage with the community by liking, commenting, and sharing posts that resonate with you.
Feed.jsx
Component
Allows the feed component to decided how many posts to show, from who to show, and how many placeholders to show(while loading)
function Feed({ users = "all", limit = 10 }) {
const [posts, setPosts] = useState([<LoadingFeedTemplate amount={10} />]);
//...
//...
}
Auth.js/login
Implementation
Returns a promise allowing failure and success logic to be handled uniquely on a page by page basis. Additionally allows for more clean and readable code
// Saves login data if success and throws an error otherwise
return await fetch(API_URL + "/auth/login", options)
.then((res) => res.json())
.then((userData) => {
if (userData.statusCode === 200) storeLocalUserData(userData, loginData);
else throw new Error("Login failed with code: " + userData.statusCode);
});
The project is organized into several directories, each containing the Astro, React, CSS, and Javascript files for a specific feature of the application:
components/
: Contains all react components as js and astro files,.jsx
and.astro
respectivelyjs/
: Contains a few js scripts yet to be ported to reactlayouts/
: Contains the general page layout as a.astro
file used by pages.pages/
: Contains all pages as.astro
filesstyles/
: Contains all.css
used in the page.utils/
: common utilility functions (for auth.js)