How to: Create a Simple Navigation Bar in Material UI

by

You can create a simple navigation bar in Material UI using the AppBar component. Inside of it, use the Toolbar component, buttons, and whatever else you’d like to create your app’s navigation bar. This example uses tinystack as its foundation. If you’re looking for a small, simple, single-container web stack to use as a starting … Read more

How to: Toggle Dark Mode in MUI

by

You can use React’s useContext and useState hooks to toggle between dark and light mode in Material UI. First create a context and a state in the root of your app. Then, define the toggle function in your context that will modify the state. Finally, call that toggle function from one of the children to … Read more

How to: Dark Mode in Material UI

by

Enable dark-mode by default in your MUI app by first importing ThemeProvider and createTheme. Then, create your theme with createTheme({palette: {mode: “dark”}}) and pass that as the theme prop for your <ThemeProvider> tag, which will wrap all the components you want the theme applied to. This example uses tinystack as its foundation. If you’re looking … Read more

FastAPI + SQLAlchemy Tutorial

by

The code for this article can be found on my GitHub: https://github.com/jmgraff/fastapi-sqlalchemy-sqlite-example FastAPI has made creating an API for your app incredibly simple. SQLAlchemy has also done the same for interacting with databases. Using both of them together makes it very simple to have your API store and retrieve data from a number of different … Read more

SQLAlchemy PostgreSQL Tutorial

by

The source code for this tutorial can be found on my GitHub: https://github.com/jmgraff/sqlalchemy-postgres-crud-example This article will go over a simple example of how to use SQLAlchemy with PostgreSQL. You’re encouraged to clone the repository and run the example yourself. Once you’re familiar with how everything works, try modifying the main.py file by making your own … Read more

SuperTokens core threw an error for a POST request to path: /recipe/signup with status code: 500 and message: Internal Error

by

This error can be caused by attempting to create and manage user accounts while using MongoDB as the database for SuperTokens. Unfortunately, SuperTokens can only use MongoDB as the backend database for session management. To fix this error, you’ll have to use a different database like MySQL. I discovered this error while working on the … Read more

Proxmox: MongoDB 5.0+ requires a CPU with AVX support

by

This error is caused by running MongoDB 5.0+ on a VM using a KVM64 CPU type. The fix for this is to switch your CPU type to host (if your host CPU supports AVX), or use version 4.4.18 of MongoDB instead. I ran into this error when working on the SupeTokens example. If you want … Read more

SuperTokens: Cannot use useSessionContext outside auth wrapper components

by

The SuperTokens error “Uncaught Error: Cannot use useSessionContext outside auth wrapper components” is caused by trying to use useSessionContext outside the SuperTokensWrapper component. To fix this, refactor your code so that all components that need to use useSessionContext are located within the SuperTokensWrapper tags. This error was discovered while I was working on the SuperTokens … Read more

React: The href attribute requires a valid value to be accessible

by

The React warning “The href attribute requires a valid value to be accessible” means you didn’t put a valid URL path in an href attribute for an <a> tag. To fix this, make sure your href attribute starts with a forward slash (/). If you’re trying to simulate a link but don’t actually want it … Read more

react-router-dom: Functions are not valid as a React child

by

The react-router-dom warning “Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.” is caused by setting the element property of a <Route> component to the name of the component rather than … Read more